/* Shared channel controls: loaded by every workspace, including provider setup. */
.p8-provider-destination-strip { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-block:16px; }
.p8-destination-card { min-width:0; padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--text); }
.p8-destination-card header { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px; }
.p8-destination-card header strong,.p8-destination-card header small { display:block; }
.p8-destination-card header small { margin-top:4px; color:var(--muted); }
.p8-destination-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--tint); color:var(--blue); }
.p8-destination-card.whatsapp .p8-destination-icon { color:var(--green); }
.p8-current-destination { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:12px; margin-top:16px; background:var(--soft); border:1px solid var(--line); border-radius:10px; }
.p8-current-destination b { overflow-wrap:anywhere; min-width:0; font-size:13px; }
.p8-current-destination span { flex-shrink:0; font-size:11px; color:var(--muted); }
.p8-destination-editor { display:grid; gap:12px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.p8-destination-editor[hidden],.p8-destination-editor [hidden] { display:none!important; }
.p8-destination-editor input,.p8-destination-editor select { width:100%; min-width:0; }
.p8-mode-switch { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; background:var(--soft); border-radius:10px; }
.p8-mode-switch button { display:flex; justify-content:center; align-items:center; gap:8px; padding:10px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; }
.p8-mode-switch button.active { background:var(--card); border-color:var(--line); color:var(--blue); }

/* Connection uses the workspace's card, typography and theme tokens. */
.bp-screen-connection .p7-wa-hero { grid-template-columns:auto minmax(0,1fr) auto; padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--text); box-shadow:none; }
.bp-screen-connection .p7-wa-hero:after,.bp-screen-connection .p7-wa-pulse { display:none; }
.bp-screen-connection .p7-wa-orbit { width:56px; height:56px; }
.bp-screen-connection .p7-wa-logo { width:56px; height:56px; background:var(--tint); color:var(--green); border:0; border-radius:14px; }
.bp-screen-connection .p7-wa-hero h1 { font-size:20px; line-height:1.6; }
.bp-screen-connection .p7-wa-hero p,.bp-screen-connection .p7-wa-identity span { color:var(--muted); }
.bp-screen-connection .p7-kicker { color:var(--green); }
.bp-screen-connection .is-offline .p7-kicker { color:var(--muted); }
.bp-screen-connection .p7-wa-state-pill { background:var(--soft); border:1px solid var(--line); color:var(--text); }
.bp-screen-connection .p7-wa-health-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.bp-screen-connection .p7-wa-health-grid article,.bp-screen-connection .p7-wa-panel { min-width:0; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:none; color:var(--text); }
.bp-screen-connection .p7-wa-main-grid { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:stretch; }
.bp-screen-connection .p7-wa-panel header { border-color:var(--line); }
.bp-screen-connection .p7-wa-panel header h2 { font-size:15px; }
.bp-screen-connection .p7-wa-panel header p,.bp-screen-connection .p7-wa-health-grid small,.bp-screen-connection .p7-wa-health-grid em { color:var(--muted); }
.bp-screen-connection .p7-device-visual,.bp-screen-connection .p7-qr-stage,.bp-screen-connection .p7-wa-error-box { background:var(--soft); border-color:var(--line); }
.bp-screen-connection .p7-qr-stage { min-height:220px; }
.bp-screen-connection .p7-qr-code img { max-width:220px; width:100%; padding:12px; background:white; border-radius:12px; }
.bp-screen-connection .p7-danger-zone { border-color:var(--line); }
.bp-screen-connection .p7-danger-zone small,.bp-screen-connection .p7-device-visual small { color:var(--muted); }
.bp-screen-connection .p7-wa-note { background:var(--tint); color:var(--text); border:1px solid var(--line); border-radius:12px; }
.bp-screen-connection .p7-diag-grid>div { background:var(--soft); border-color:var(--line); }
.bp-screen-connection .p7-wa-health-grid strong,.bp-screen-connection .p7-wa-error-box strong { overflow-wrap:anywhere; }
.workspace-load-error { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; margin-block:16px; background:var(--card); border:1px solid var(--danger); border-radius:12px; color:var(--text); }
@media(max-width:1000px) {
  .bp-screen-connection .p7-wa-health-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bp-screen-connection .p7-wa-hero { grid-template-columns:auto minmax(0,1fr); }
  .bp-screen-connection .p7-wa-hero-actions { grid-column:1/-1; flex-direction:row; align-items:center; }
}
@media(max-width:700px) {
  .bp-screen-provider-edit .p8-provider-destination-strip { grid-template-columns:1fr; }
  .p8-destination-card { padding:16px; }
  .bp-screen-connection .p7-wa-hero { padding:18px; text-align:start; gap:12px; }
  .bp-screen-connection .p7-wa-hero h1 { font-size:17px; }
  .bp-screen-connection .p7-wa-identity { justify-content:flex-start; flex-wrap:wrap; }
  .bp-screen-connection .p7-wa-hero-actions { flex-wrap:wrap; }
  .bp-screen-connection .p7-wa-main-grid { grid-template-columns:1fr; }
  .bp-screen-connection .p7-wa-health-grid article { padding:12px; }
  .workspace-load-error { align-items:stretch; flex-direction:column; }
}