/* ==========================================================================
   GN6 DIS+ · CHAT ENTRE USUARIOS (panel lateral derecho)
   Usa las variables del tema de gn6shell.css (--fn-*)
   ========================================================================== */
#gn6-chat-btn.is-active { background: rgba(40, 94, 108, .10); color: var(--fn-red); }
#gn6-chat-badge { background: var(--fn-danger, #c2412d); }
#gn6-chat-btn.is-ring i { animation: gn6c-ring .7s ease; }
@keyframes gn6c-ring { 0%,100% { transform: rotate(0) } 20% { transform: rotate(-14deg) } 40% { transform: rotate(12deg) } 60% { transform: rotate(-8deg) } 80% { transform: rotate(4deg) } }

.gn6c-backdrop {
    position: fixed; inset: 0; z-index: 1390;
    background: rgba(24, 22, 20, .18);
    opacity: 0; visibility: hidden;
    transition: opacity .2s, visibility .2s;
}
.gn6c-backdrop.is-open { opacity: 1; visibility: visible; }

.gn6c {
    --gn6c-side: 300px;
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1400;
    width: min(880px, calc(100vw - 24px));
    display: flex;
    background: var(--fn-surface, #fff);
    border-left: 1px solid var(--fn-line);
    box-shadow: -24px 0 60px rgba(24, 22, 20, .16);
    transform: translateX(104%);
    transition: transform .24s cubic-bezier(.2, .8, .2, 1);
    font-family: inherit;
    color: var(--fn-text);
}
.gn6c.is-open { transform: none; }

/* ---------- columna de conversaciones ---------- */
.gn6c-side {
    width: var(--gn6c-side); flex: none;
    display: flex; flex-direction: column;
    border-right: 1px solid var(--fn-line);
    background: var(--fn-bg, #f6f5f3);
    min-height: 0;
}
.gn6c-side-head { display: flex; align-items: center; gap: 6px; padding: 18px 14px 10px 18px; }
.gn6c-title { flex: 1; margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.gn6c-ib {
    width: 34px; height: 34px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 9px; background: transparent;
    color: var(--fn-text-2); font-size: 17px; cursor: pointer;
}
.gn6c-ib:hover { background: rgba(31, 29, 27, .06); color: var(--fn-text); }
.gn6c-ib[hidden] { display: none; }
.gn6c-side-head .gn6c-ib[data-a="new"] { background: var(--fn-red); color: #fff; }
.gn6c-side-head .gn6c-ib[data-a="new"]:hover { filter: brightness(1.08); }

.gn6c-search {
    position: relative; margin: 2px 14px 10px;
}
.gn6c-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--fn-muted); font-size: 14px; display: inline-flex; }
.gn6c-search input {
    width: 100%; height: 38px; box-sizing: border-box;
    padding: 0 12px 0 34px;
    border: 1px solid var(--fn-line); border-radius: 10px;
    background: var(--fn-surface, #fff); color: var(--fn-text);
    font: inherit; font-size: 14px; outline: none;
}
.gn6c-search input:focus { border-color: var(--fn-red); box-shadow: 0 0 0 3px rgba(40, 94, 108, .12); }

.gn6c-newhead { display: none; flex-direction: column; gap: 4px; padding: 0 10px 6px; }
.gn6c.is-newmode .gn6c-newhead { display: flex; }
.gn6c-back, .gn6c-newgroup {
    display: flex; align-items: center; gap: 10px;
    border: 0; background: transparent; cursor: pointer; text-align: left;
    font: inherit; color: var(--fn-text); border-radius: 10px;
}
.gn6c-back { padding: 4px 8px; font-size: 13px; font-weight: 600; color: var(--fn-text-2); }
.gn6c-back i { font-size: 18px; display: inline-flex; }
.gn6c-newgroup { padding: 8px; font-size: 14px; font-weight: 600; }
.gn6c-back:hover, .gn6c-newgroup:hover { background: rgba(31, 29, 27, .05); }

.gn6c-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 12px; scrollbar-width: thin; }
.gn6c-sec { padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fn-muted); }
.gn6c-none { padding: 26px 16px; text-align: center; color: var(--fn-muted); font-size: 13.5px; }

.gn6c-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; margin-bottom: 2px;
    border-radius: 12px; cursor: pointer; outline: none;
    transition: background .12s;
}
.gn6c-item:hover, .gn6c-item:focus-visible { background: rgba(31, 29, 27, .05); }
.gn6c-item.is-active { background: var(--fn-surface, #fff); box-shadow: 0 1px 3px rgba(24, 22, 20, .08), inset 3px 0 0 var(--fn-red); }
.gn6c-item-body { flex: 1; min-width: 0; }
.gn6c-item-top, .gn6c-item-bot { display: flex; align-items: center; gap: 8px; }
.gn6c-item-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.gn6c-item-top time { flex: none; font-size: 11.5px; color: var(--fn-muted); }
.gn6c-item-bot span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--fn-text-2); }
.gn6c-item.is-unread .gn6c-item-top b { font-weight: 700; }
.gn6c-item.is-unread .gn6c-item-bot span { color: var(--fn-text); font-weight: 500; }
.gn6c-item.is-unread .gn6c-item-top time { color: var(--fn-red); font-weight: 600; }
.gn6c-count {
    flex: none; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
    border-radius: 10px; background: var(--fn-red); color: #fff;
    font-style: normal; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
.gn6c-on { font-style: normal; color: #2f8a57; font-weight: 600; }

/* avatar (iniciales o grupo) con punto de "en línea" */
.gn6c-av {
    --av: var(--fn-red);
    position: relative; flex: none;
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--av) 16%, #fff);
    color: var(--av);
    font-size: 14px; font-weight: 700; letter-spacing: .02em;
}
.gn6c-av.is-group { border-radius: 12px; }
.gn6c-av i { font-size: 18px; display: inline-flex; }
.gn6c-dot {
    position: absolute; right: 0; bottom: 0;
    width: 11px; height: 11px; border-radius: 50%;
    background: #34a868; border: 2px solid var(--fn-surface, #fff);
}
.gn6c-side .gn6c-dot { border-color: var(--fn-bg, #f6f5f3); }
.gn6c-dot.is-away { background: #e0a526; }
.gn6c-away { font-style: normal; color: #b07d12; font-weight: 600; }

/* ---------- conversación ---------- */
.gn6c-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; background: var(--fn-surface, #fff); }
.gn6c-main-head {
    display: flex; align-items: center; gap: 8px;
    min-height: 64px; padding: 10px 12px 10px 18px; box-sizing: border-box;
    border-bottom: 1px solid var(--fn-line);
}
.gn6c-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; }
.gn6c-who > div { min-width: 0; display: flex; flex-direction: column; }
.gn6c-who b { font-size: 15.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gn6c-who small { font-size: 12.5px; color: var(--fn-muted); }
.gn6c:not(.has-conv) .gn6c-main-head .gn6c-ib[data-a="members"],
.gn6c:not(.has-conv) .gn6c-who { visibility: hidden; }

.gn6c-more {
    align-self: center; margin: 10px 0 0;
    border: 1px solid var(--fn-line); border-radius: 999px; background: var(--fn-surface, #fff);
    padding: 5px 14px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fn-text-2); cursor: pointer;
}
.gn6c-more:hover { color: var(--fn-red); border-color: var(--fn-line-2); }
.gn6c-more[hidden] { display: none; }

.gn6c-widget { flex: 1; min-height: 0; display: none; }
.gn6c.has-conv .gn6c-widget { display: block; }
.gn6c.is-loading .gn6c-widget { opacity: .45; transition: opacity .15s; }
#gn6-chat-widget { height: 100%; }

.gn6c-empty {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 30px; text-align: center; color: var(--fn-text-2);
}
.gn6c.has-conv .gn6c-empty { display: none; }
.gn6c-empty-ic {
    width: 64px; height: 64px; border-radius: 20px; margin-bottom: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(40, 94, 108, .09); color: var(--fn-red); font-size: 28px;
}
.gn6c-empty h3 { margin: 0; font-size: 17px; color: var(--fn-text); }
.gn6c-empty p { margin: 0 0 12px; max-width: 320px; font-size: 13.5px; line-height: 1.5; }
.gn6c-cta, .gn6c-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 16px; border-radius: 10px;
    border: 1px solid var(--fn-line-2); background: var(--fn-surface, #fff);
    font: inherit; font-size: 14px; font-weight: 600; color: var(--fn-text); cursor: pointer;
}
.gn6c-cta, .gn6c-btn.is-primary { background: var(--fn-red); border-color: var(--fn-red); color: #fff; }
.gn6c-cta:hover, .gn6c-btn.is-primary:hover { filter: brightness(1.08); }
.gn6c-btn.is-danger { border-color: transparent; color: var(--fn-danger, #c2412d); padding: 0 10px; }
.gn6c-btn.is-danger:hover { background: rgba(194, 65, 45, .08); }

/* ---------- componente dxChat con el estilo de la aplicación ---------- */
.gn6c .dx-chat { border: 0 !important; background: transparent; }
.gn6c .dx-chat-messagelist { padding: 6px 18px 0; }
.gn6c .dx-chat-messagebubble { border-radius: 16px !important; font-size: 14px; line-height: 1.45; padding: 9px 13px !important; max-width: 520px; }
.gn6c .dx-chat-messagegroup-alignment-start .dx-chat-messagebubble { background: var(--fn-bg, #f3f2ef) !important; color: var(--fn-text) !important; }
.gn6c .dx-chat-messagegroup-alignment-end .dx-chat-messagebubble { background: var(--fn-red) !important; color: #fff !important; }
.gn6c .dx-chat-messagegroup-alignment-start .dx-chat-messagebubble:last-child { border-bottom-left-radius: 6px !important; }
.gn6c .dx-chat-messagegroup-alignment-end .dx-chat-messagebubble:last-child { border-bottom-right-radius: 6px !important; }
.gn6c .dx-chat-messagegroup-information { font-size: 12px; color: var(--fn-muted); }
.gn6c .dx-chat-messagegroup-author-name { font-weight: 600; color: var(--fn-text-2); }
.gn6c .dx-chat-messagelist-day-header { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fn-muted); }
.gn6c .dx-chat-messagebox { padding: 12px 16px 16px !important; border-top: 1px solid var(--fn-line); }
.gn6c .dx-chat-messagebox .dx-textarea { border-radius: 14px !important; }
.gn6c .dx-chat-messagebox .dx-button { border-radius: 12px !important; }
.gn6c .dx-avatar { background: rgba(40, 94, 108, .14) !important; color: var(--fn-red) !important; font-weight: 700; }

/* ---------- diálogo de grupo ---------- */
.gn6c-dialog {
    position: fixed; inset: 0; z-index: 1450;
    display: flex; align-items: center; justify-content: center;
    background: rgba(24, 22, 20, .32); backdrop-filter: blur(2px);
    opacity: 0; transition: opacity .16s;
}
.gn6c-dialog.is-open { opacity: 1; }
.gn6c-dialog-box {
    width: min(460px, calc(100vw - 32px));
    background: var(--fn-surface, #fff); border-radius: 18px;
    box-shadow: 0 30px 80px rgba(24, 22, 20, .28);
    padding: 18px 20px 16px;
    transform: translateY(8px) scale(.98); transition: transform .16s;
}
.gn6c-dialog.is-open .gn6c-dialog-box { transform: none; }
.gn6c-dialog header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.gn6c-dialog header h3 { flex: 1; margin: 0; font-size: 18px; font-weight: 700; }
.gn6c-lbl { display: block; margin: 12px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fn-muted); }
.gn6c-dialog footer { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.gn6c-grow { flex: 1; }
.gn6c-opt { display: flex; align-items: center; gap: 10px; }
.gn6c-opt .gn6c-av { width: 28px; height: 28px; font-size: 11px; }
.gn6c-opt .gn6c-dot { width: 8px; height: 8px; border-width: 1.5px; }

/* avisos con acción (toast "Nuevo mensaje": clic = abrir conversación) */
.gn6-toast.is-clickable { cursor: pointer; }
.gn6-toast.is-clickable:hover { box-shadow: 0 14px 34px rgba(24, 22, 20, .2); }

.gn6c-only-mobile { display: none !important; }

/* ---------- móvil / tablet estrecha: una columna cada vez ---------- */
@media (max-width: 767px) {
    .gn6c { width: 100vw; border-left: 0; }
    .gn6c-side { width: 100%; border-right: 0; }
    .gn6c-main { position: absolute; inset: 0; transform: translateX(100%); transition: transform .22s; }
    .gn6c.is-conv-open .gn6c-main { transform: none; }
    .gn6c-only-mobile { display: inline-flex !important; }
    .gn6c .dx-chat-messagelist { padding: 4px 10px 0; }
    .gn6c .dx-chat-messagebubble { max-width: 86vw; }
}

/* ==========================================================================
   ASISTENTE GN6 (IA)
   ========================================================================== */
.gn6c-av.is-ai {
    border-radius: 12px;
    background: linear-gradient(135deg, #285e6c, #4f8f9b 60%, #8fbfc6);
    color: #fff;
}
.gn6c-av.is-ai i { font-size: 19px; }
.gn6c-item-ai { position: relative; margin-bottom: 8px; }
.gn6c-item-ai::after {               /* separador con el resto de conversaciones */
    content: ""; position: absolute; left: 10px; right: 10px; bottom: -5px; height: 1px; background: var(--fn-line);
}
.gn6c-tag {
    flex: none; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em;
    padding: 1px 6px; border-radius: 6px; background: rgba(40, 94, 108, .12); color: var(--fn-red);
}
.gn6c.is-ai .gn6c-who small { color: var(--fn-muted); font-style: italic; }

/* respuestas del asistente: Markdown */
.gn6c-md p { margin: 0 0 6px; }
.gn6c-md p:last-child { margin-bottom: 0; }
.gn6c-md ul, .gn6c-md ol { margin: 4px 0 8px; padding-left: 22px !important; }
.gn6c-md ul { list-style: disc outside !important; }
.gn6c-md ol { list-style: decimal outside !important; }
.gn6c-md li { display: list-item !important; }
.gn6c-md li::marker { color: var(--fn-red); font-weight: 700; }
.gn6c-md li { margin: 2px 0; }
.gn6c-md kbd {
    display: inline-block; padding: 0 5px; border: 1px solid var(--fn-line-2); border-bottom-width: 2px; border-radius: 5px;
    background: var(--fn-surface, #fff); font: 600 12px/1.5 ui-monospace, monospace; color: var(--fn-text);
}
.gn6c-txt { white-space: pre-wrap; }
.gn6c-act {
    display: inline-flex; align-items: center; gap: 5px;
    margin: 1px 2px; padding: 2px 9px 2px 7px; border-radius: 999px;
    background: var(--fn-surface, #fff); border: 1px solid rgba(40, 94, 108, .3);
    color: var(--fn-red); font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.gn6c-act:hover { background: var(--fn-red); color: #fff; border-color: var(--fn-red); }
.gn6c-act i { font-size: 11px; display: inline-flex; }

/* sugerencias de la bienvenida */
.gn6c-sugs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gn6c-sug {
    border: 1px solid rgba(40, 94, 108, .3); background: var(--fn-surface, #fff); color: var(--fn-red);
    border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
}
.gn6c-sug:hover { background: var(--fn-red); color: #fff; }

/* valoración 👍 / 👎 */
.gn6c-fb { display: flex; gap: 2px; margin: 8px -4px -2px; }
.gn6c-fb button {
    width: 28px; height: 26px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
    color: var(--fn-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.gn6c-fb button:hover { background: rgba(31, 29, 27, .07); color: var(--fn-text); }
.gn6c-fb button.is-on { color: var(--fn-red); background: rgba(40, 94, 108, .12); }
.gn6c-fb button[data-v="-1"].is-on { color: var(--fn-danger, #c2412d); background: rgba(194, 65, 45, .1); }
.gn6c-flip { transform: rotate(180deg); }
.gn6c-fbform { display: flex; gap: 6px; margin-top: 6px; }
.gn6c-fbform textarea {
    flex: 1; resize: none; border: 1px solid var(--fn-line-2); border-radius: 10px; padding: 6px 9px;
    font: inherit; font-size: 13px; background: var(--fn-surface, #fff); color: var(--fn-text); outline: none;
}
.gn6c-fbform textarea:focus { border-color: var(--fn-red); }
.gn6c-fbform button {
    align-self: flex-end; border: 0; border-radius: 9px; padding: 7px 12px; background: var(--fn-red); color: #fff;
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.gn6c-thanks { font-size: 12.5px; color: var(--fn-muted); font-style: italic; }
.gn6c.is-thinking .dx-chat-messagebox .dx-button { opacity: .5; pointer-events: none; }
/* el globo del asistente es más ancho: las explicaciones con pasos lo necesitan */
.gn6c.is-ai .dx-chat-messagegroup-alignment-start .dx-chat-messagebubble { max-width: 600px; }