/* ==========================================================================
   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); }
.robin-login-provider { display: flex; align-items: center; justify-content: center; gap: var(--s2); width: 100%; }
.robin-login-or { display: flex; align-items: center; gap: var(--s3); font-size: 12px; color: var(--fey-ink-soft); }
.robin-login-or::before, .robin-login-or::after { content: ""; flex: 1; border-top: 1px solid var(--fey-line); }
.robin-login-more summary { cursor: pointer; font-size: 12.5px; color: var(--fey-ink-soft); }
.robin-login-more[open] summary { margin-bottom: var(--s3); }

/* 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; }
.robin-bubble-img { display: block; max-width: 260px; max-height: 260px; border-radius: 8px; margin-top: 4px; }
.robin-bubble-file { font-size: 12.5px; text-decoration: underline; color: inherit; }

/* Canales: una fila por número, bot o chat, con quién lo atiende a la mano. */
.robin-channels { display: flex; flex-direction: column; gap: var(--s3); max-width: 920px; margin-bottom: var(--s5); }
.robin-channel {
    display: flex; align-items: center; gap: var(--s4);
    padding: var(--s4) var(--s5); border-radius: var(--fey-radius-lg);
    background: var(--fey-surface); border: 1px solid var(--fey-line); box-shadow: var(--fey-lift);
}
.robin-channel-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.robin-channel-name {
    all: unset; cursor: text; font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
    border-bottom: 1px dashed transparent; align-self: flex-start;
}
.robin-channel-name:hover { border-bottom-color: var(--fey-line-strong); }
.robin-channel-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.robin-channel-agent { display: flex; flex-direction: column; gap: 4px; min-width: 190px; }
.robin-channel-agent .is-empty { color: var(--fey-ink-faint); }
.robin-channel-pick { display: flex; flex-direction: column; gap: var(--s2); }
.robin-channel-pick label { display: flex; align-items: center; gap: var(--s2); font-size: 13px; }
.robin-access label.is-disabled { opacity: 0.55; }
.fey-topbar-actions .fey-btn .robin-logo { margin-right: 4px; vertical-align: -3px; }
@media (max-width: 720px) {
    .robin-channel { flex-wrap: wrap; }
    .robin-channel-agent { min-width: 0; width: 100%; }
}

/* De qué Ling es cada conversación: una etiqueta con su color. */
.robin-inbox-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.robin-ling-tag {
    display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
    color: hsl(var(--tag-hue) 55% 32%); background: hsl(var(--tag-hue) 70% 93%); border: 1px solid hsl(var(--tag-hue) 50% 82%);
}

/* Crear o editar un Ling: pantalla propia, secciones en tarjetas y la barra de guardar siempre a la mano. */
.robin-editor { max-width: 880px; padding-bottom: 0; }
.robin-editor #canales { scroll-margin-top: 24px; }
.robin-editor-bar {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; flex-direction: column; gap: var(--s3);
    padding: var(--s4) 0; margin-top: calc(-1 * var(--s2));
    background: linear-gradient(to bottom, transparent, var(--fey-bg, var(--fey-surface-sunken)) 28%);
}

/* Qué puede hacer un Ling: cada habilidad con sus opciones; se ilumina cuando está activa. */
.robin-abilities { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s3); }
.robin-ability {
    display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4);
    border: 1px solid var(--fey-line); border-radius: var(--fey-radius); background: var(--fey-surface-sunken);
}
.robin-ability.on { border-color: var(--fey-line-strong); background: var(--fey-surface); box-shadow: var(--fey-lift); }
.robin-ability header { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.robin-ability-options { display: flex; flex-direction: column; gap: var(--s2); font-size: 13px; }
.robin-ability-options label { display: flex; align-items: center; gap: 8px; }

/* Citas: la hora grande a la izquierda, quién y para qué al centro, la decisión a la derecha. */
.robin-appointments { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.robin-appointments li { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--fey-line); }
.robin-appointments li:first-child { border-top: none; padding-top: 0; }
.robin-appointment-when { display: flex; flex-direction: column; min-width: 84px; font-size: 12.5px; }
.robin-appointment-when span { font-size: 20px; font-weight: 550; letter-spacing: -0.02em; }
.robin-appointment-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 13px; }

/* Organizador: lo que tiene hora va agrupado por día; un recado no tiene hora, lleva su ícono. */
.robin-organizer-day { margin: var(--s4) 0 var(--s2); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fey-ink-soft); }
.robin-organizer-day:first-child { margin-top: 0; }
.robin-appointment-when .robin-organizer-note { font-size: 18px; }
.robin-appointment-body > span:first-child { margin-bottom: 2px; }
.robin-meeting-link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: 12.5px; font-weight: 600; color: var(--fey-accent); text-decoration: none; }
.robin-meeting-link:hover { text-decoration: underline; }

/* Horario de una agenda: un renglón por día. */
.robin-hours { display: flex; flex-direction: column; }
.robin-hours-day { display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s2) 0; border-top: 1px solid var(--fey-line); font-size: 13px; }
.robin-hours-day:first-child { border-top: none; }
.robin-hours-name { display: flex; align-items: center; gap: 8px; min-width: 120px; padding-top: 6px; text-transform: capitalize; }
.robin-hours-ranges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.robin-hours-range { display: inline-flex; align-items: center; gap: 6px; }
.robin-hours-range input { width: 110px; }

/* Recados. */
.robin-messages { display: flex; flex-direction: column; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
.robin-messages li {
    display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4);
    background: var(--fey-surface); border: 1px solid var(--fey-line); border-radius: var(--fey-radius); box-shadow: var(--fey-lift);
}
.robin-messages li.is-done { opacity: 0.6; box-shadow: none; }
.robin-messages li p { margin: 0; white-space: pre-line; }
.robin-messages .fey-spread > div { display: flex; flex-direction: column; gap: 2px; }

/* Base de conocimiento: colecciones a la izquierda, sus documentos a la derecha. */
.robin-kb { display: grid; grid-template-columns: 220px 1fr; gap: var(--s5); align-items: start; }
.robin-kb-collections { display: flex; flex-direction: column; gap: 2px; }
.robin-kb-collection { display: flex; flex-direction: column; padding: var(--s2) var(--s3); border-radius: 8px; color: inherit; text-decoration: none; font-size: 13px; }
.robin-kb-collection:hover { background: var(--fey-surface-sunken); text-decoration: none; }
.robin-kb-collection.on { background: var(--fey-surface); box-shadow: var(--fey-lift); }
.robin-kb-upload { position: relative; }
.robin-kb-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.robin-kb-upload label {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s5);
    border: 1.5px dashed var(--fey-line-strong); border-radius: var(--fey-radius); font-size: 13px; text-align: center;
}
.robin-kb-upload:hover label { background: var(--fey-surface-sunken); }
.robin-kb-docs { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.robin-kb-docs li { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--fey-line); }
.robin-kb-docs li:first-child { border-top: none; }
.robin-kb-docs a { display: flex; flex-direction: column; flex: 1; min-width: 0; color: inherit; text-decoration: none; font-size: 13px; }
.robin-kb-docs a:hover strong { text-decoration: underline; }
.robin-kb-editor { font-size: 12.5px; line-height: 1.55; min-height: 60vh; }
/* Imágenes de un documento (el logo de la empresa): miniaturas arriba del editor. */
.robin-kb-images { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s3); align-items: stretch; }
.robin-kb-images figure { margin: 0; display: flex; flex-direction: column; gap: 4px; padding: var(--s2); border: 1px solid var(--fey-line); border-radius: var(--fey-radius-sm); background: var(--fey-surface); }
.robin-kb-images img { max-height: 64px; max-width: 180px; object-fit: contain; }
.robin-kb-images figcaption { font-size: 11px; }
.robin-kb-image-add { position: relative; display: flex; align-items: center; padding: var(--s3) var(--s4); border: 1.5px dashed var(--fey-line-strong); border-radius: var(--fey-radius-sm); font-size: 13px; cursor: pointer; }
.robin-kb-image-add:hover { background: var(--fey-surface-sunken); }
.robin-kb-image-add input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
@media (max-width: 720px) {
    .robin-kb { grid-template-columns: 1fr; }
    .robin-appointments li { flex-wrap: wrap; }
}

/* ── Consola (como el Status de IRC) ─────────────────────────────────────
   Siempre oscura, como una terminal: los colores son suyos y no cambian con el tema. */
.robin-console {
    --con-bg: #12141a; --con-bar: #1a1d25; --con-line: #262a35;
    --con-text: #d6d9e0; --con-dim: #7b8394; --con-ts: #5f6778;
    --con-in: #e8eaf0; --con-out: #9ecbff; --con-tool: #b9a6ff; --con-ask: #ffcf70;
    --con-warn: #ffb35c; --con-err: #ff7b7b; --con-sys: #8fd6b4;
    display: flex; flex-direction: column;
    height: calc(100vh - 210px); min-height: 380px;
    background: var(--con-bg); color: var(--con-text);
    border-radius: var(--fey-radius-lg); overflow: hidden;
    border: 1px solid var(--con-line);
    font-family: var(--fey-mono); font-size: 12.5px; line-height: 1.55;
}
.robin-console-bar {
    display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
    padding: 8px var(--s4); background: var(--con-bar); border-bottom: 1px solid var(--con-line);
}
.robin-console-state { color: var(--con-sys); font-weight: 600; }
.robin-console-state.paused { color: var(--con-ask); }
.robin-console-count { color: var(--con-dim); font-size: 11.5px; }
.robin-console-filter {
    margin-left: auto; min-width: 0; width: 240px; max-width: 100%;
    background: var(--con-bg); color: var(--con-text); border: 1px solid var(--con-line);
    border-radius: 6px; padding: 4px 8px; font: inherit;
}
/* column-reverse deja el scroll pegado abajo: lo nuevo siempre se ve, sin JavaScript. */
.robin-console-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column-reverse; padding: var(--s3) var(--s4); }
.robin-console-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.robin-console-line .ts { color: var(--con-ts); }
.robin-console-line .where { color: var(--con-dim); }
.robin-console-line .mark { color: var(--con-sys); font-weight: 600; }
.robin-console-line.sys .msg { color: var(--con-sys); }
.robin-console-line.in .msg { color: var(--con-in); }
.robin-console-line.out .msg { color: var(--con-out); }
.robin-console-line.tool .msg, .robin-console-line.tool .mark { color: var(--con-tool); }
.robin-console-line.ask .msg, .robin-console-line.ask .mark { color: var(--con-ask); }
.robin-console-line.warn .msg, .robin-console-line.warn .mark { color: var(--con-warn); }
.robin-console-line.err .msg, .robin-console-line.err .mark { color: var(--con-err); }
.robin-console-line .nick { font-weight: 600; }
.nick-0 { color: #7fd1ff; } .nick-1 { color: #ff9ad5; } .nick-2 { color: #a6e36b; }
.nick-3 { color: #ffc56b; } .nick-4 { color: #c3a6ff; } .nick-5 { color: #6be3d1; }
.robin-console-input {
    display: flex; align-items: center; gap: var(--s2);
    padding: 8px var(--s4); background: var(--con-bar); border-top: 1px solid var(--con-line);
}
.robin-console-input .prompt { color: var(--con-sys); font-weight: 600; }
.robin-console-input input {
    flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--con-text); font: inherit;
}
@media (max-width: 720px) {
    .robin-console { height: calc(100vh - 260px); font-size: 12px; }
    .robin-console-filter { width: 100%; margin-left: 0; }
}

/* Archivos: carpetas y miniaturas de lo recibido. */
.robin-folders { margin-bottom: var(--s4); flex-wrap: wrap; }
.robin-file-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; border: 1px solid rgba(0,0,0,.06); }

/* Teléfono con su país: la lada al lado, el número ocupa el resto. */
.robin-phone { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--s2); }

/* El QR de un canal: en blanco aunque el panel esté oscuro, para que cualquier celular lo lea. */
.robin-share-qr { display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.robin-share-qr img { background: #fff; padding: 12px; border-radius: 12px; border: 1px solid var(--line, rgba(0,0,0,.08)); }