/* Onboarding conversacional de Perla. z 140: debajo del diálogo de conectar canal (150)
   y de los diálogos del panel (1000), así el flujo de Meta/Gmail queda usable encima. */

.gd-overlay { position: fixed; inset: 0; z-index: 140; background: rgba(16,16,18,.28);
  display: flex; align-items: center; justify-content: center; padding: 28px; }
.gd-overlay::before { content: ''; position: absolute; inset: 0; backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); z-index: -1; }
.gd-dialog { width: 880px; max-width: 100%; height: min(720px, 100%); display: flex;
  background: var(--surface-card); border-radius: 18px; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(16,16,18,.22), 0 8px 24px -16px rgba(16,16,18,.12);
  animation: gdRise var(--dur-slow, .35s) var(--ease-out, ease); }

.gd-side { width: 248px; flex: none; display: flex; flex-direction: column; gap: 14px;
  padding: 22px 18px; border-right: 1px solid var(--border-subtle); background: var(--surface-sunken, var(--accent-soft)); }
.gd-kicker { font-family: var(--font-mono); font-size: 10px; font-weight: var(--weight-semibold, 600);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.gd-side-title { margin: 4px 0 0; font-size: 16px; font-weight: 600; letter-spacing: -.3px;
  color: var(--text-strong); line-height: 1.3; }
.gd-bar { height: 4px; border-radius: 99px; background: var(--border-subtle); overflow: hidden; }
.gd-bar > span { display: block; height: 100%; background: var(--text-strong); border-radius: 99px; }
.gd-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.gd-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; overflow: auto; }
.gd-step { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border-radius: 10px; }
.gd-step.now { background: var(--surface-card); }
.gd-mark { width: 16px; height: 16px; margin-top: 1px; flex: none; color: var(--text-faint); }
.gd-step.done .gd-mark { color: var(--text-strong); }
.gd-step.now .gd-mark { color: var(--coral-700); }
.gd-step-l { font-size: 13px; font-weight: 600; color: var(--text-body); line-height: 1.3; }
.gd-step.done .gd-step-l { color: var(--text-muted); font-weight: 500; }
.gd-step-s { font-size: 11px; color: var(--text-faint); margin-top: 2px; line-height: 1.35; }
.gd-opt { font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-faint); margin-left: 6px; }

.gd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gd-head { padding: 18px 20px 12px; position: relative; border-bottom: 1px solid var(--border-subtle); }
.gd-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: none;
  background: none; color: var(--text-faint); border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.gd-close:hover { background: var(--accent-soft); color: var(--text-body); }
.gd-title { margin: 0 48px 4px 0; font-size: 18px; font-weight: 600; letter-spacing: -.3px; color: var(--text-strong); }
.gd-sub { margin: 0 48px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }

.gd-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 8px; display: flex; flex-direction: column; gap: 12px; }
.gd-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; }
.gd-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.gd-orb { width: 26px; height: 26px; border-radius: 8px; flex: none; display: flex; align-items: center;
  justify-content: center; background: var(--text-strong); color: var(--text-on-dark, #fff);
  font-size: 11px; font-weight: 600; }
.gd-bubble { padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5;
  color: var(--text-body); background: var(--accent-soft); }
.gd-text { white-space: pre-wrap; }
.gd-msg.user .gd-bubble { background: var(--text-strong); color: var(--text-on-dark, #fff);
  border-radius: 14px 14px 4px 14px; }
.gd-msg.perla .gd-bubble { border-radius: 14px 14px 14px 4px; }
.gd-saved { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle);
  font-size: 12px; color: var(--text-muted); }
.gd-saved strong { color: var(--text-strong); font-weight: 600; }
.gd-err { margin: 12px 20px; font-size: 13px; color: var(--text-muted); }

.gd-compose { padding: 12px 16px 14px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 8px; }
.gd-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gd-btn { background: var(--text-strong); color: var(--text-on-dark, #fff); border: none; font: inherit;
  font-size: 13.5px; font-weight: 600; padding: 9px 14px; border-radius: 11px; cursor: pointer; min-height: 38px; }
.gd-btn:disabled { opacity: .5; cursor: default; }
.gd-btn-2 { background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-default);
  font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 13px; border-radius: 11px; cursor: pointer; min-height: 38px; }
.gd-btn-2:disabled { opacity: .5; cursor: default; }
.gd-row { display: flex; gap: 8px; }
.gd-row input { flex: 1; min-width: 0; border: 1px solid var(--border-default); background: var(--surface-card);
  color: var(--text-body); border-radius: 11px; padding: 10px 12px; font: inherit; font-size: 14px; }
.gd-row input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.gd-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gd-link { background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--text-faint);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.gd-pill { position: fixed; right: 22px; bottom: 22px; z-index: 140; display: flex; align-items: center; gap: 8px;
  background: var(--text-strong); color: var(--text-on-dark, #fff); border: none; border-radius: 999px;
  padding: 10px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 12px 30px -16px rgba(16,16,18,.45); }
.gd-pill i, .gd-pill svg { width: 16px; height: 16px; }

@keyframes gdRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .gd-overlay { align-items: flex-end; padding: 0; }
  .gd-dialog { width: 100%; height: min(92vh, 100%); flex-direction: column; border-radius: 18px 18px 0 0; }
  .gd-side { width: auto; border-right: none; border-bottom: 1px solid var(--border-subtle); padding: 14px 16px;
    max-height: 34%; }
  .gd-pill { right: 16px; bottom: 16px; }
}