/* b6-api-webhooks.css — pedaço 6/8 do antigo painel-body.css. A ORDEM dos links
   no index.html é a cascata: não reordenar, não trocar de posição.

   ══ TELA DE API E WEBHOOKS — REFEITA EM 20/08/2026 ═════════════════════════════
   O que estava feio não era falta de capricho, era falta de ESCALA: a tela tinha
   nove tamanhos de texto quase-iguais (10 / 10.5 / 11 / 11.5 / 12 / 12.5 / 13 /
   13.5 / 14), cinco raios (6/8/10/12/14), cor crua fora do design system
   (#d13438, #d97706, #2563eb) e controles de alturas diferentes na mesma linha
   (input 40px ao lado de select 38px ao lado de botão 36px).

   Aqui vale UMA escala, e só ela:
     tipo    18 / 15 / 13 / 12 / 11        (mono 12)
     raio    --r-lg 16 · --r-md 12 · --r-sm 8 · --r-xs 6 · --r-full
     espaço  múltiplo de 4
     altura  --itg-h em TODO controle (input, select, botão)
     tempo   --itg-t em toda transição
     cor     só por token (--accent, --brand-amber, --brand-rose, --brand-blue)

   Duas correções de comportamento junto:
   1. O cabeçalho era `position:sticky` com `margin:-22px` — margem negativa sobe
      a caixa acima do topo do scroller, e era por isso que o título "API e
      Webhooks" aparecia CORTADO AO MEIO. Agora o sticky é limpo, sem margem.
   2. `.itg-input` também é declarado no b7 (painel do grupo), que carrega DEPOIS
      e vencia a cascata. Aqui tudo é escopado em `.itg-shell`, então o campo
      desta tela deixa de herdar o desenho da tela do grupo. */

        /* ── raiz: a escala mora aqui ─────────────────────────────────────────── */
        .itg-shell {
            --itg-h: 38px;                                                  /* altura única de controle */
            --itg-t: .16s ease;                                             /* transição única */
            --itg-pad: 24px;                                                /* respiro do drawer */
            --itg-s1: color-mix(in srgb, var(--text-main) 3%, transparent); /* superfície de repouso */
            --itg-s2: color-mix(in srgb, var(--text-main) 7%, transparent); /* superfície de destaque */
            display: flex;
            flex-direction: column;
            min-width: 0;
            color: var(--text-main);
            font-size: 13px;
            line-height: 1.55;
        }

        /* ── cabeçalho fixo ───────────────────────────────────────────────────── */
        .itg-head { position: sticky; top: 0; z-index: 6; padding: 20px var(--itg-pad) 0;
            background: var(--bg-card); border-bottom: 1px solid var(--border); }
        .itg-head-row { display: flex; align-items: flex-start; gap: 12px; }
        .itg-logo { width: 40px; height: 40px; flex: none; display: grid; place-items: center;
            border-radius: var(--r-md); background: var(--accent-subtle); color: var(--accent); font-size: 16px; }
        .itg-head-txt { flex: 1; min-width: 0; }
        .itg-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
            text-transform: uppercase; color: var(--text-secondary); }
        .itg-title { margin: 4px 0 0; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--text-main); }
        .itg-close { width: var(--itg-h); height: var(--itg-h); flex: none; display: inline-flex;
            align-items: center; justify-content: center; border-radius: var(--r-sm);
            border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
            font-size: 14px; cursor: pointer; transition: color var(--itg-t), border-color var(--itg-t), background var(--itg-t); }
        .itg-close:hover { background: var(--itg-s2); color: var(--text-main); border-color: var(--border-hover); }
        .itg-lead { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-secondary); max-width: 68ch; }
        .itg-lead b { color: var(--text-main); font-weight: 600; }
        .itg-scope-pill { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0;
            padding: 5px 12px; border-radius: var(--r-full); font-size: 12px; font-weight: 600;
            background: var(--accent-subtle); color: var(--accent); }
        .itg-scope-pill i { font-size: 11px; }

        /* ── abas de nível 1 (ficam coladas no cabeçalho) ─────────────────────── */
        .itg-tabs { display: flex; gap: 4px; margin: 16px 0 0; flex-wrap: wrap; }
        .itg-tab { display: inline-flex; align-items: center; gap: 8px; height: var(--itg-h);
            padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent;
            color: var(--text-secondary); font-family: inherit; font-size: 13px; font-weight: 600;
            cursor: pointer; border-radius: var(--r-sm) var(--r-sm) 0 0;
            transition: color var(--itg-t), border-color var(--itg-t), background var(--itg-t); }
        .itg-tab:hover { color: var(--text-main); background: var(--itg-s1); }
        .itg-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
        .itg-count { font-style: normal; min-width: 18px; padding: 0 6px; border-radius: var(--r-full);
            font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
            background: var(--itg-s2); color: var(--text-secondary); }
        .itg-tab.is-active .itg-count { background: var(--accent); color: #fff; }

        /* ── corpo ────────────────────────────────────────────────────────────── */
        .itg-content { padding: 20px var(--itg-pad) var(--itg-pad); }
        .itg-section { margin-bottom: 24px; }
        .itg-section:last-child { margin-bottom: 0; }
        .itg-h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px;
            font-size: 15px; font-weight: 700; color: var(--text-main); }
        .itg-help { margin: 0 0 16px; font-size: 12px; line-height: 1.6; color: var(--text-secondary); max-width: 72ch; }
        .itg-help:last-child { margin-bottom: 0; }
        .itg-help b { color: var(--text-main); font-weight: 600; }

        /* ── faixa de dados da conexão ────────────────────────────────────────── */
        .itg-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 8px; margin: 20px 0; padding: 4px; border-radius: var(--r-md);
            border: 1px solid var(--border); background: var(--itg-s1); }
        /* O endereço base é o texto mais longo dos três e é o que a pessoa copia:
           ganha a coluna maior em vez de virar reticências. */
        @media (min-width: 860px) {
            .itg-meta { grid-template-columns: 1.4fr 1.2fr .85fr; }
        }
        .itg-meta-item { padding: 10px 12px; border-radius: var(--r-sm); min-width: 0; }
        .itg-meta-k { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700;
            letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
        .itg-meta-v { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; color: var(--text-main); }
        .itg-meta-v code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        /* ── tipografia mono unificada ────────────────────────────────────────── */
        .itg-shell code, .itg-shell pre { font-family: var(--font-mono); font-size: 12px; }

        /* ── estado (bolinha + texto), no lugar de dois desenhos de selo ──────── */
        .itg-state { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
        .itg-dot { width: 8px; height: 8px; border-radius: var(--r-full); flex: none; background: var(--text-muted); }
        .itg-state.is-on { color: var(--accent); }
        .itg-state.is-on .itg-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }

        /* ── selos ────────────────────────────────────────────────────────────── */
        .itg-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
            border-radius: var(--r-full); font-size: 11px; font-weight: 700; letter-spacing: .03em;
            text-transform: uppercase; white-space: nowrap; }
        .itg-badge.is-ok { background: var(--accent-subtle); color: var(--accent); }
        .itg-badge.is-warn { background: var(--brand-amber-subtle); color: var(--brand-amber); }
        .itg-badge.is-danger { background: var(--brand-rose-subtle); color: var(--brand-rose); }

        /* ── etiquetas de permissão ───────────────────────────────────────────── */
        .itg-tags { display: flex; flex-wrap: wrap; gap: 4px; }
        .itg-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; font-style: normal;
            border-radius: var(--r-xs); font-family: var(--font-mono); font-size: 11px; font-weight: 600;
            background: var(--accent-subtle); color: var(--accent); }
        .itg-tag.is-sensivel { background: var(--brand-amber-subtle); color: var(--brand-amber); }

        /* ── cartões de app (nível 1) ─────────────────────────────────────────── */
        .itg-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; }
        .itg-app-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; min-width: 0;
            text-align: left; font-family: inherit; cursor: pointer; border: 1px solid var(--border);
            border-radius: var(--r-md); background: var(--itg-s1); color: var(--text-main);
            transition: border-color var(--itg-t), background var(--itg-t), transform var(--itg-t); }
        .itg-app-card:hover { border-color: var(--accent-border); background: var(--itg-s2); transform: translateY(-1px); }
        .itg-app-card.is-off { opacity: .55; }
        .itg-app-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
        .itg-app-id { min-width: 0; }
        .itg-app-id .itg-badge { margin-top: 4px; }
        .itg-app-name { font-size: 14px; font-weight: 700; color: var(--text-main);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .itg-app-desc { font-size: 12px; line-height: 1.5; color: var(--text-secondary); min-height: 36px;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .itg-app-stats { display: flex; gap: 20px; margin-top: auto; padding-top: 12px;
            border-top: 1px solid var(--border); font-size: 11px; color: var(--text-secondary); }
        .itg-app-stats span { display: block; }
        .itg-app-stats b { display: block; font-size: 15px; font-weight: 700; color: var(--text-main); line-height: 1.3; }
        .itg-app-card.is-new { align-items: center; justify-content: center; gap: 8px; min-height: 168px;
            text-align: center; border-style: dashed; background: transparent; color: var(--text-secondary); }
        .itg-app-card.is-new:hover { color: var(--accent); }
        .itg-app-card.is-new i { font-size: 18px; }
        .itg-app-card.is-new strong { font-size: 13px; color: inherit; }
        .itg-app-card.is-new span { font-size: 12px; max-width: 26ch; line-height: 1.5; }

        .itg-avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center;
            border-radius: var(--r-md); font-size: 18px; overflow: hidden; color: #fff; }
        .itg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .itg-avatar.is-lg { width: 52px; height: 52px; border-radius: var(--r-md); font-size: 24px; }

        /* ── cabeçalho do app aberto (nível 2) ────────────────────────────────── */
        .itg-crumbs { display: flex; align-items: center; gap: 8px; margin: 16px 0 0;
            padding-bottom: 16px; font-size: 12px; color: var(--text-secondary); }
        .itg-crumb { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0;
            background: transparent; color: var(--text-secondary); font-family: inherit; font-size: 12px;
            font-weight: 600; cursor: pointer; transition: color var(--itg-t); }
        .itg-crumb:hover { color: var(--accent); }
        .itg-crumbs i { font-size: 9px; opacity: .6; }
        .itg-crumbs strong { color: var(--text-main); font-weight: 600; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        .itg-appbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
            padding: 16px; margin-bottom: 20px; border: 1px solid var(--border);
            border-radius: var(--r-md); background: var(--itg-s1); }
        .itg-appbar-main { flex: 1; min-width: 200px; }
        .itg-appbar-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
            font-size: 16px; font-weight: 700; color: var(--text-main); }
        .itg-appbar-desc { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
        .itg-appbar .itg-tags { margin-top: 10px; }
        .itg-app-actions { display: flex; gap: 8px; flex-wrap: wrap; }

        /* ── controle segmentado (abas de dentro do app) ──────────────────────── */
        .itg-seg { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 20px; max-width: 100%;
            border: 1px solid var(--border); border-radius: var(--r-md); background: var(--itg-s1);
            overflow-x: auto; }
        .itg-seg-btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px;
            border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-secondary);
            font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
            transition: color var(--itg-t), background var(--itg-t); }
        .itg-seg-btn:hover { color: var(--text-main); }
        .itg-seg-btn.is-active { background: var(--bg-card); color: var(--text-main); box-shadow: var(--shadow-xs); }
        .itg-seg-btn.is-active .itg-count { background: var(--accent); color: #fff; }

        /* ── lista de itens (token, webhook) ──────────────────────────────────── */
        .itg-list { display: flex; flex-direction: column; gap: 8px; }
        .itg-item { display: flex; align-items: flex-start; gap: 16px; padding: 14px 16px;
            border: 1px solid var(--border); border-radius: var(--r-md); background: var(--itg-s1);
            transition: border-color var(--itg-t); }
        .itg-item:hover { border-color: var(--border-hover); }
        .itg-item.is-off { opacity: .55; }
        .itg-item-main { flex: 1; min-width: 0; }
        .itg-item-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .itg-item-name { font-size: 13px; font-weight: 700; color: var(--text-main); }
        .itg-item-url { margin-top: 6px; font-family: var(--font-mono); font-size: 12px;
            color: var(--text-secondary); word-break: break-all; }
        .itg-item-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
        .itg-item-main .itg-tags { margin-top: 8px; }
        .itg-item-side { flex: none; }

        /* ── chip de metadado: substitui a linha corrida de "•" ───────────────── */
        .itg-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
            border: 1px solid var(--border); border-radius: var(--r-sm); background: transparent;
            color: var(--text-secondary); font-family: inherit; font-size: 11px; white-space: nowrap; }
        .itg-chip i { font-size: 10px; opacity: .8; }
        .itg-chip.is-mono { font-family: var(--font-mono); color: var(--text-main); cursor: pointer;
            transition: color var(--itg-t), border-color var(--itg-t); }
        .itg-chip.is-mono:hover { color: var(--accent); border-color: var(--accent-border); }
        .itg-chip.is-warn { color: var(--brand-amber); border-color: color-mix(in srgb, var(--brand-amber) 35%, transparent); }

        /* ── botões ───────────────────────────────────────────────────────────── */
        .itg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            height: var(--itg-h); padding: 0 16px; border: 1px solid var(--border); border-radius: var(--r-sm);
            background: var(--itg-s1); color: var(--text-main); font-family: inherit; font-size: 13px;
            font-weight: 600; cursor: pointer; white-space: nowrap;
            transition: background var(--itg-t), border-color var(--itg-t), color var(--itg-t); }
        .itg-btn:hover { background: var(--itg-s2); border-color: var(--border-hover); }
        .itg-btn i { font-size: 12px; }
        .itg-btn.is-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
        .itg-btn.is-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
        .itg-btn.is-danger { background: transparent; border-color: color-mix(in srgb, var(--brand-rose) 40%, transparent);
            color: var(--brand-rose); }
        .itg-btn.is-danger:hover { background: var(--brand-rose-subtle); border-color: var(--brand-rose); }
        .itg-btn.is-sm { height: 30px; padding: 0 12px; font-size: 12px; }
        .itg-btn.is-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
        .itg-btn.is-ghost:hover { background: var(--itg-s1); color: var(--text-main); border-color: var(--border); }
        .itg-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }

        .itg-copy { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
            height: 26px; padding: 0 10px; flex: none; border: 1px solid var(--border); border-radius: var(--r-sm);
            background: transparent; color: var(--text-secondary); font-family: inherit; font-size: 11px;
            cursor: pointer; transition: color var(--itg-t), border-color var(--itg-t); }
        .itg-copy:hover { color: var(--accent); border-color: var(--accent-border); }

        /* ── formulários ──────────────────────────────────────────────────────── */
        .itg-form { padding: 20px; border: 1px solid var(--border); border-radius: var(--r-md);
            background: var(--itg-s1); }
        .itg-fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
        .itg-field { grid-column: span 12; min-width: 0; }
        .itg-field.is-half { grid-column: span 6; }
        .itg-field.is-third { grid-column: span 4; }
        .itg-field.is-narrow { grid-column: span 2; }
        .itg-field.is-wide { grid-column: span 8; }
        .itg-label { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 700;
            letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }

        .itg-shell .itg-input,
        .itg-shell .itg-select { width: 100%; box-sizing: border-box; height: var(--itg-h);
            padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
            background: var(--bg-input); color: var(--text-main); font-family: inherit; font-size: 13px;
            transition: border-color var(--itg-t), box-shadow var(--itg-t); }
        .itg-shell .itg-input::placeholder { color: var(--text-muted); }
        .itg-shell .itg-input:focus,
        .itg-shell .itg-select:focus { outline: none; border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-subtle); }
        .itg-shell .itg-select { appearance: none; padding-right: 32px; cursor: pointer;
            background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                linear-gradient(135deg, currentColor 50%, transparent 50%);
            background-position: calc(100% - 17px) center, calc(100% - 12px) center;
            background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

        /* ── permissões e eventos: cartão marcável, não checkbox solto ───────── */
        .itg-optgroup { margin-bottom: 16px; }
        .itg-optgroup:last-child { margin-bottom: 0; }
        .itg-optgroup-name { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700;
            letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
        .itg-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 8px; }
        .itg-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; min-width: 0;
            border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-card);
            cursor: pointer; transition: border-color var(--itg-t), background var(--itg-t); }
        .itg-opt:hover { border-color: var(--border-hover); }
        .itg-opt input { margin: 2px 0 0; accent-color: var(--accent); flex: none; cursor: pointer; }
        .itg-opt:has(input:checked) { border-color: var(--accent-border); background: var(--accent-subtle); }
        .itg-opt:has(input:disabled) { opacity: .5; cursor: not-allowed; background: transparent; }
        .itg-opt-txt { min-width: 0; }
        .itg-opt code { display: block; font-weight: 700; color: var(--text-main); word-break: break-all; }
        .itg-opt small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.45; color: var(--text-secondary); }
        .itg-opt.is-sensivel code { color: var(--brand-amber); }
        .itg-opt.is-sensivel:has(input:checked) { border-color: color-mix(in srgb, var(--brand-amber) 40%, transparent);
            background: var(--brand-amber-subtle); }

        /* ── escolha de ícone do app ──────────────────────────────────────────── */
        .itg-icon-picker { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
            padding: 16px; margin-bottom: 16px; border: 1px solid var(--border);
            border-radius: var(--r-md); background: var(--bg-card); }
        .itg-icon-col { flex: 1; min-width: 200px; }
        .itg-emojis, .itg-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
        .itg-emoji { width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
            border: 1px solid var(--border); border-radius: var(--r-sm); background: transparent;
            font-size: 15px; line-height: 1; cursor: pointer; transition: border-color var(--itg-t), background var(--itg-t); }
        .itg-emoji:hover { border-color: var(--border-hover); }
        .itg-emoji.is-active { border-color: var(--accent); background: var(--accent-subtle); }
        .itg-swatch { width: 26px; height: 26px; padding: 0; border-radius: var(--r-sm);
            border: 2px solid transparent; cursor: pointer; transition: transform var(--itg-t); }
        .itg-swatch:hover { transform: scale(1.08); }
        .itg-swatch.is-active { border-color: var(--text-main); }

        /* ── bloco de código ──────────────────────────────────────────────────── */
        .itg-code-wrap { position: relative; }
        .itg-code { margin: 0; padding: 16px; overflow-x: auto; line-height: 1.7;
            border: 1px solid var(--border); border-radius: var(--r-md);
            background: var(--itg-s1); color: var(--text-main); }
        .itg-code-wrap .itg-copy { position: absolute; top: 10px; right: 10px;
            background: var(--bg-card); }

        /* ── endpoints ────────────────────────────────────────────────────────── */
        .itg-ep-group { margin-bottom: 16px; }
        .itg-ep-group:last-child { margin-bottom: 0; }
        .itg-ep-list { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
        .itg-ep { display: grid; grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1.5fr) auto;
            align-items: center; gap: 12px; padding: 10px 12px; background: var(--itg-s1);
            transition: background var(--itg-t); }
        .itg-ep + .itg-ep { border-top: 1px solid var(--border); }
        .itg-ep:hover { background: var(--itg-s2); }
        .itg-method { height: 20px; display: inline-flex; align-items: center; justify-content: center;
            border-radius: var(--r-xs); font-family: var(--font-mono); font-size: 10px; font-weight: 700;
            letter-spacing: .04em; }
        .itg-method.is-get { background: var(--brand-blue-subtle); color: var(--brand-blue); }
        .itg-method.is-post { background: var(--accent-subtle); color: var(--accent); }
        .itg-method.is-delete { background: var(--brand-rose-subtle); color: var(--brand-rose); }
        .itg-method.is-put, .itg-method.is-patch { background: var(--brand-amber-subtle); color: var(--brand-amber); }
        .itg-ep-path { font-family: var(--font-mono); font-size: 12px; color: var(--text-main); word-break: break-all; }
        .itg-ep-desc { font-size: 12px; line-height: 1.45; color: var(--text-secondary); }

        /* ── entregas de webhook ──────────────────────────────────────────────── */
        .itg-delivery { display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
            padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
            background: var(--itg-s1); font-size: 12px; }
        .itg-delivery code { color: var(--text-main); }
        .itg-delivery-alvo { flex: 1; min-width: 120px; color: var(--text-secondary); word-break: break-all; }
        .itg-delivery-meta { flex: none; font-family: var(--font-mono); font-size: 11px;
            color: var(--text-secondary); white-space: nowrap; }
        .itg-delivery-err { flex-basis: 100%; font-size: 11px; color: var(--brand-rose); }

        /* ── histórico ────────────────────────────────────────────────────────── */
        .itg-audit { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
            padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
            background: var(--itg-s1); font-size: 12px; }
        .itg-audit-when { flex: none; font-family: var(--font-mono); font-size: 11px;
            color: var(--text-secondary); white-space: nowrap; }
        .itg-audit-what { font-weight: 600; color: var(--text-main); }
        .itg-audit-detail { flex-basis: 100%; font-size: 11px; line-height: 1.45; color: var(--text-secondary); }

        /* ── avisos ───────────────────────────────────────────────────────────── */
        .itg-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
            margin-top: 16px; border-radius: var(--r-md);
            border: 1px solid var(--accent-border); background: var(--accent-subtle); }
        .itg-note i { flex: none; margin-top: 2px; color: var(--accent); }
        .itg-note div { font-size: 12px; line-height: 1.6; color: var(--text-main); }
        .itg-note code { word-break: break-all; }
        .itg-note.is-warn { border-color: color-mix(in srgb, var(--brand-amber) 40%, transparent);
            background: var(--brand-amber-subtle); margin: 0 0 20px; }
        .itg-note.is-warn i { color: var(--brand-amber); }

        .itg-empty { display: flex; flex-direction: column; align-items: center; gap: 6px;
            padding: 32px 20px; text-align: center; border: 1px dashed var(--border);
            border-radius: var(--r-md); color: var(--text-secondary); }
        .itg-empty i { margin-bottom: 4px; font-size: 20px; opacity: .55; }
        .itg-empty strong { font-size: 13px; color: var(--text-main); }
        .itg-empty span { max-width: 44ch; font-size: 12px; line-height: 1.5; }

        .itg-danger { margin-top: 24px; padding: 16px; border-radius: var(--r-md);
            border: 1px solid color-mix(in srgb, var(--brand-rose) 30%, transparent);
            background: var(--brand-rose-subtle); }
        .itg-danger h4 { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--brand-rose); }
        .itg-danger p { margin: 0 0 12px; font-size: 12px; line-height: 1.55; color: var(--text-secondary); max-width: 72ch; }

        /* ── o modal dos apps não consegue subir acima da barra superior ───────
           MEDIDO em 20/08/2026: `.apps-detail-panel` é `position:fixed`, mas mora
           DENTRO da tela de apps, num contexto de empilhamento que fica ABAIXO da
           barra do topo — `document.elementFromPoint(x, 30)` devolve
           `.global-top-bar` mesmo com z-index 10060 no overlay. Subir z-index NÃO
           resolve. O que resolve é o cartão não passar por baixo da barra: era
           isso que cortava o título "API e Webhooks" ao meio no print do Yuri,
           sempre que o conteúdo era alto o bastante para o cartão bater no teto.
           A barra mede 62px; 78 = 62 + 16 de respiro. Vale para TODOS os drawers
           de app (Google Agenda, DigiFood), não só este — mora aqui porque o b5,
           dono do `.apps-detail-panel`, está sendo mexido em outra frente.
           No celular a barra não existe, então a regra começa em 961px. */
        @media (min-width: 961px) {
            .apps-detail-panel { padding: 24px; }
            .apps-detail-panel .app-inline-drawer { max-height: min(88vh, 760px); }
        }

        /* ── telas estreitas ──────────────────────────────────────────────────── */
        @media (max-width: 720px) {
            .itg-shell { --itg-pad: 16px; }
            .itg-field.is-half, .itg-field.is-third, .itg-field.is-wide { grid-column: span 12; }
            .itg-apps { grid-template-columns: 1fr; }
            .itg-ep { grid-template-columns: 56px 1fr; }
            .itg-ep-desc, .itg-ep .itg-tag { grid-column: 1 / -1; }
            .itg-delivery-meta { margin-left: 0; }
            .itg-item { flex-direction: column; gap: 12px; }
            .itg-item-side { width: 100%; }
            .itg-item-side .itg-btn { width: 100%; }
        }

        /* Autor da mensagem no grupo: foto na coluna esquerda + nome DENTRO da bolha.
           As regras moraram aqui até 23/08/2026; hoje ficam junto das outras da bolha,
           em b2-ia-e-contatos.css (secção "AUTOR NO GRUPO"). */