/* ==========================================================================
   Panel de Robin — lo que no está en Fey.Web.Shared.
   --------------------------------------------------------------------------
   Los tokens, el reset y los componentes vienen de Fey. Aquí van dos cosas:

   1. El marco (riel, página, encabezado). En Fey vive en Fey.Web y no en el
      paquete compartido; está copiado tal cual para que los dos productos se vean
      igual. Si Fey lo mueve a Fey.Web.Shared, esta sección se borra.
   2. Lo propio del panel: las tarjetas de integraciones, los Lings, la entrada.
   ========================================================================== */

/* ── 1. Marco (copiado de Fey.Web/wwwroot/css/fey.css) ─────────────────── */

.fey-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; position: relative; z-index: 1; }
.fey-rail {
    display: flex; flex-direction: column; gap: var(--s5);
    padding: var(--s5) var(--s4);
    border-right: 1px solid var(--fey-line);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(24px) saturate(140%);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.fey-brand { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s1) var(--s2) 0; }
.fey-brand-mark { font-family: var(--fey-display); font-size: 25px; letter-spacing: -0.02em; color: var(--fey-ink); }
.fey-brand-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--fey-accent); transform: translateY(-9px); }
.fey-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.fey-nav-group + .fey-nav-group { margin-top: var(--s4); }
.fey-nav-group > .fey-label { padding: 0 var(--s2) var(--s2); }
.fey-nav-item {
    display: flex; align-items: center; gap: var(--s3);
    padding: 8px var(--s3); border-radius: var(--fey-radius-sm);
    color: var(--fey-ink-soft); font-size: 13.5px; font-weight: 450; text-decoration: none;
    transition: background 0.16s var(--fey-ease-soft), color 0.16s var(--fey-ease-soft);
    position: relative;
}
.fey-nav-item:hover { background: var(--fey-primary-soft); color: var(--fey-ink); text-decoration: none; }
.fey-nav-item.active { background: var(--fey-primary-soft); color: var(--fey-primary-deep); font-weight: 500; }
.fey-nav-item.active::before {
    content: ''; position: absolute; left: calc(var(--s4) * -1); top: 50%; transform: translateY(-50%);
    width: 2px; height: 15px; border-radius: 0 2px 2px 0; background: var(--fey-primary);
}
.fey-nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.75; }
.fey-nav-item.active .fey-nav-icon { opacity: 1; }
.fey-rail-foot { border-top: 1px solid var(--fey-line); padding-top: var(--s3); display: flex; align-items: center; gap: var(--s3); }
.fey-main { min-width: 0; display: flex; flex-direction: column; }
.fey-topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); padding: var(--s6) var(--s7) var(--s5); }
.fey-topbar-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fey-topbar-actions { display: flex; gap: var(--s2); flex-shrink: 0; }
.fey-page { padding: 0 var(--s7) var(--s8); }

@media (max-width: 860px) {
    .fey-shell { grid-template-columns: 1fr; }
    .fey-rail { position: static; height: auto; flex-direction: column; gap: var(--s3); border-right: 0; border-bottom: 1px solid var(--fey-line); }
    .fey-nav { flex-direction: row; flex-wrap: wrap; }
    .fey-nav-group { display: flex; flex-wrap: wrap; gap: 2px; }
    .fey-nav-group + .fey-nav-group { margin-top: 0; }
    .fey-nav-group > .fey-label { display: none; }
    .fey-nav-item.active::before { display: none; }
    .fey-topbar { padding: var(--s5) var(--s4) var(--s4); flex-direction: column; align-items: flex-start; }
    .fey-page { padding: 0 var(--s4) var(--s7); }
}

/* ── 2. Panel ──────────────────────────────────────────────────────────── */

.robin-page { display: flex; flex-direction: column; gap: var(--s6); }
.robin-logo { flex-shrink: 0; display: block; border-radius: 8px; }

/* Integraciones en el riel: la primera cosa, con los logos a la vista. */
.robin-rail-integrations {
    display: flex; flex-direction: column; gap: var(--s2);
    padding: var(--s3); border-radius: var(--fey-radius);
    background: linear-gradient(135deg, var(--fey-primary-tint), rgba(196, 144, 209, 0.12));
    border: 1px solid var(--fey-line-strong);
    color: var(--fey-ink); text-decoration: none;
    transition: transform 0.2s var(--fey-ease), box-shadow 0.2s var(--fey-ease);
}
.robin-rail-integrations:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--fey-lift); }
.robin-rail-integrations.active { border-color: var(--fey-primary); box-shadow: var(--fey-ring); }
.robin-rail-integrations-title { font-weight: 550; font-size: 13.5px; }
.robin-rail-integrations-logos { display: flex; gap: 6px; }

/* El héroe del inicio. */
.robin-hero {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s6); align-items: center;
    padding: var(--s6); border-radius: var(--fey-radius-lg);
    background:
        radial-gradient(ellipse 70% 90% at 100% 0%, rgba(196, 144, 209, 0.20), transparent 60%),
        linear-gradient(135deg, var(--fey-surface), var(--fey-surface-sunken));
    border: 1px solid var(--fey-line-strong); box-shadow: var(--fey-lift);
    color: var(--fey-ink); text-decoration: none;
    transition: transform 0.25s var(--fey-ease), box-shadow 0.25s var(--fey-ease);
}
.robin-hero:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--fey-lift-lg); }
.robin-hero h2 { font-size: 30px; line-height: 1.15; margin: var(--s2) 0; }
.robin-hero p { color: var(--fey-ink-soft); margin-bottom: var(--s4); max-width: 46ch; }
.robin-hero-logos { display: grid; grid-template-columns: repeat(3, 52px); gap: var(--s4); justify-content: center; }
.robin-hero-logos .robin-logo { box-shadow: var(--fey-lift); border-radius: 12px; }
@media (max-width: 860px) { .robin-hero { grid-template-columns: 1fr; } .robin-hero-logos { justify-content: start; } }

/* Lista de pasos para dejarlo listo. */
.robin-checklist { display: flex; flex-direction: column; gap: var(--s3); }
.robin-checklist li { display: flex; align-items: center; gap: var(--s3); }
.robin-checklist li.done { opacity: 0.6; }
.robin-check {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--fey-line-strong); font-size: 12px; font-weight: 700;
}
.robin-checklist li.done .robin-check { background: var(--fey-green); border-color: var(--fey-green); color: #fff; }

/* Secciones y tarjetas de integraciones. */
.robin-section-head { margin-bottom: var(--s4); }
.robin-section-head h2 { font-size: 15px; font-weight: 600; }
.robin-integrations { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s4); }
.robin-integration {
    display: flex; flex-direction: column; gap: var(--s3);
    padding: var(--s5); border-radius: var(--fey-radius-lg);
    background: var(--fey-surface); border: 1px solid var(--fey-line); box-shadow: var(--fey-lift);
    transition: border-color 0.2s var(--fey-ease-soft), box-shadow 0.2s var(--fey-ease-soft);
    scroll-margin-top: var(--s6);
}
.robin-integration:hover { border-color: var(--fey-line-strong); }
.robin-integration:target { border-color: var(--fey-primary); box-shadow: var(--fey-ring), var(--fey-lift); }
.robin-integration-soon { background: var(--fey-surface-sunken); box-shadow: none; }
.robin-integration-soon .robin-logo { filter: saturate(0.55); opacity: 0.85; }
.robin-integration-wide { max-width: 820px; }
.robin-integration-head { display: flex; align-items: center; gap: var(--s3); }
.robin-integration-titles { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.robin-integration-titles h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.robin-integration-blurb { color: var(--fey-ink-soft); font-size: 13px; flex: 1; }
.robin-integration-foot { display: flex; align-items: center; gap: var(--s2); margin-top: auto; }
.robin-integration-list { display: flex; flex-direction: column; gap: var(--s2); }
.robin-integration-list li { display: flex; align-items: center; gap: var(--s2); font-size: 13px; }
.robin-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.robin-dot-on { background: var(--fey-green); box-shadow: 0 0 0 3px var(--fey-green-soft); }
.robin-dot-off { background: var(--fey-amber); }

/* Pasos dentro de un asistente. */
.robin-steps { counter-reset: paso; display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s5); }
.robin-steps li { counter-increment: paso; position: relative; padding-left: 34px; font-size: 13px; color: var(--fey-ink-soft); }
.robin-steps li strong { color: var(--fey-ink); }
.robin-steps li::before {
    content: counter(paso); position: absolute; left: 0; top: -1px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--fey-primary-tint); color: var(--fey-primary-deep);
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
}
.robin-pair, .robin-snippet {
    display: flex; align-items: center; gap: var(--s3); margin: var(--s3) 0;
    padding: var(--s3) var(--s4); border-radius: var(--fey-radius-sm);
    background: var(--fey-surface-sunken); border: 1px dashed var(--fey-line-strong);
}
/* FeyCopy ya muestra el valor; aquí solo se le da aire y, al código de emparejar, tamaño. */
.robin-pair .fey-copy, .robin-snippet .fey-copy { flex: 1; min-width: 0; }
.robin-pair .fey-copy-value { font-family: var(--fey-mono); font-size: 22px; letter-spacing: 0.04em; }
.robin-snippet .fey-copy-value { font-family: var(--fey-mono); font-size: 12px; }
.robin-color { padding: 4px; height: 38px; }

/* Lings. */
.robin-lings { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s4); }
.robin-ling {
    display: flex; flex-direction: column; gap: var(--s3);
    padding: var(--s5); border-radius: var(--fey-radius-lg);
    background: var(--fey-surface); border: 1px solid var(--fey-line); box-shadow: var(--fey-lift);
}
.robin-ling h3 { font-family: var(--fey-display); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; }
.robin-ling-channels { display: flex; flex-wrap: wrap; gap: var(--s2); }
.robin-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px;
    border-radius: 999px; border: 1px solid var(--fey-line); font-size: 12px; color: var(--fey-ink-soft);
    text-decoration: none;
}
.robin-chip-add { padding-left: 10px; border-style: dashed; }
.robin-chip-add:hover { color: var(--fey-primary-deep); border-color: var(--fey-primary); text-decoration: none; }
.robin-ling-recent { display: flex; flex-direction: column; gap: 6px; padding-top: var(--s3); border-top: 1px solid var(--fey-line); font-size: 12.5px; }
.robin-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s2); }
.robin-tool {
    display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s3);
    border: 1px solid var(--fey-line); border-radius: var(--fey-radius-sm); cursor: pointer; font-size: 12.5px;
}
.robin-tool:has(input:checked) { border-color: var(--fey-primary); background: var(--fey-primary-soft); }

/* Llaves. */
.robin-keys { display: flex; flex-direction: column; gap: var(--s4); max-width: 900px; }
.robin-keys .fey-field { flex: 1; min-width: 220px; }

.robin-pre {
    font-family: var(--fey-mono); font-size: 12px; white-space: pre-wrap;
    background: var(--fey-surface-sunken); padding: var(--s4); border-radius: var(--fey-radius-sm);
}

/* Entrada. */
.robin-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s5); position: relative; z-index: 1; }
.robin-login-card {
    width: min(460px, 100%); display: flex; flex-direction: column; gap: var(--s4);
    padding: var(--s7) var(--s6); border-radius: var(--fey-radius-lg);
    background: var(--fey-surface); border: 1px solid var(--fey-line); box-shadow: var(--fey-lift-lg);
}
.robin-login-ways { display: flex; flex-direction: column; gap: var(--s3); font-size: 13px; color: var(--fey-ink-soft); }
.robin-login-ways strong { color: var(--fey-ink); }

/* Equipo. */
.robin-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); }
.robin-roles > div {
    display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4);
    border-radius: var(--fey-radius); background: var(--fey-surface-sunken); border: 1px solid var(--fey-line); font-size: 12.5px;
}
.robin-team { display: flex; flex-direction: column; }
.robin-team li { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) 0; flex-wrap: wrap; }
.robin-team li + li { border-top: 1px solid var(--fey-line); }
.robin-team-who { flex: 1; min-width: 220px; }
.robin-team-ids { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.robin-team-ids .robin-chip { padding-left: 10px; }
.robin-team-role { width: auto; min-width: 150px; }

/* Directorio. */
.robin-dir-tools { display: flex; flex-direction: column; gap: var(--s3); }
.robin-dir-search { max-width: 420px; }
.robin-dir-groups { display: flex; flex-wrap: wrap; gap: 6px; }
.robin-dir-groups .robin-chip { padding-left: 10px; background: var(--fey-surface); cursor: pointer; font: inherit; font-size: 12px; }
.robin-dir-groups .robin-chip.is-on { border-color: var(--fey-primary); background: var(--fey-primary-soft); color: var(--fey-primary-deep); }
.robin-chip-group { padding-left: 10px; background: var(--fey-surface-sunken); }
.robin-dir-inactive { opacity: 0.55; }
.robin-import-plan { display: flex; flex-direction: column; gap: 4px; padding: var(--s3) var(--s4); border-radius: var(--fey-radius-sm); background: var(--fey-surface-sunken); font-size: 13px; }
.robin-import-problem { font-size: 12.5px; color: var(--fey-amber-deep, #92400e); }

/* Acceso de un Ling. */
.robin-access { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s2); }
.robin-access label {
    display: flex; flex-direction: column; gap: 2px; padding: var(--s3);
    border: 1px solid var(--fey-line); border-radius: var(--fey-radius-sm); cursor: pointer; font-size: 12.5px;
}
.robin-access label:has(input:checked) { border-color: var(--fey-primary); background: var(--fey-primary-soft); }
.robin-access input { margin-right: 6px; }
.robin-access-groups { display: flex; flex-wrap: wrap; gap: 6px; }
.robin-access-groups label { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }

/* Conversaciones. */
.robin-inbox { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: var(--s4); min-height: 70vh; }
@media (max-width: 900px) { .robin-inbox { grid-template-columns: 1fr; } }
.robin-inbox-list { display: flex; flex-direction: column; gap: 6px; max-height: 75vh; overflow-y: auto; }
.robin-inbox-item {
    display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; font-size: 13px; color: inherit;
    padding: var(--s3); border-radius: var(--fey-radius-sm); border: 1px solid var(--fey-line); background: var(--fey-surface); cursor: pointer;
}
.robin-inbox-item:hover { border-color: var(--fey-primary); }
.robin-inbox-item.is-on { border-color: var(--fey-primary); background: var(--fey-primary-soft); }
.robin-inbox-item .fey-faint { font-size: 11.5px; }
.robin-inbox-last { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.robin-inbox-chat {
    display: flex; flex-direction: column; min-height: 60vh; max-height: 78vh;
    border: 1px solid var(--fey-line); border-radius: var(--fey-radius-lg); background: var(--fey-surface); box-shadow: var(--fey-lift);
}
.robin-inbox-head { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--fey-line); }
.robin-inbox-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: var(--s4); }
.robin-bubble { max-width: 75%; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; white-space: pre-wrap; display: flex; flex-direction: column; gap: 2px; }
.robin-bubble-user { align-self: flex-start; background: var(--fey-surface-sunken); }
.robin-bubble-assistant { align-self: flex-end; background: var(--fey-primary-soft); }
.robin-bubble-human { align-self: flex-end; background: var(--fey-primary); color: #fff; }
.robin-bubble-meta { font-size: 10.5px; opacity: 0.7; }
.robin-inbox-note { padding: 0 var(--s4); font-size: 12.5px; }
.robin-inbox-send { display: flex; gap: var(--s2); align-items: flex-end; padding: var(--s3) var(--s4); border-top: 1px solid var(--fey-line); }
.robin-inbox-send textarea { flex: 1; resize: none; }