/* ── Admin Chat — Floating panel ─────────────────────────── */
/* Views: conv-list | admins-picker | msgs-view              */

/* Root: fixed al viewport, cubre toda la pantalla con pointer-events:none
   para no bloquear clics en el resto del admin.
   Los hijos usan position:absolute relativo a este contenedor.
   Esto garantiza que el chat quede fijo al viewport independientemente
   de overflow/flex/scroll en body o cualquier ancestro. */
.admin-chat-root {
  position: fixed !important; inset: 0; z-index: 10001;
  pointer-events: none;
}

/* ── Notification toasts ────────────────────────────────── */
.admin-chat-notif-stack {
  position: absolute; top: 3.75rem; right: 1rem;
  display: flex; flex-direction: column; gap: .5rem;
  width: 280px; pointer-events: none; z-index: 10;
}
.admin-chat-notif {
  background: var(--mrln-bg-2); border: 1px solid var(--mrln-border-md);
  border-radius: var(--mrln-r-lg); padding: .6rem .75rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  pointer-events: all; cursor: pointer;
  display: flex; flex-direction: column; gap: .25rem;
  position: relative;
}
.admin-chat-notif:hover { border-color: var(--mrln-accent); }
.admin-chat-notif-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
}
.admin-chat-notif-sender {
  font-family: var(--mrln-mono); font-size: 10px;
  font-weight: 600; color: var(--mrln-accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-chat-notif-conv {
  font-family: var(--mrln-mono); font-size: 9px; color: var(--mrln-text-3);
  white-space: nowrap; flex-shrink: 0;
}
.admin-chat-notif-dismiss {
  background: none; border: none; color: var(--mrln-text-3);
  cursor: pointer; font-size: 12px; line-height: 1; padding: 0;
  flex-shrink: 0; transition: color .15s;
}
.admin-chat-notif-dismiss:hover { color: var(--mrln-text); }
.admin-chat-notif-text {
  font-size: 12px; color: var(--mrln-text-2); line-height: 1.4;
  word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Panel */
.admin-chat-panel {
  position: absolute; bottom: 4.5rem; right: 1.5rem;
  width: 360px; height: 480px;
  background: var(--mrln-bg-1); border: 1px solid var(--mrln-border-md);
  border-radius: var(--mrln-r-xl); display: flex; flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: all;
}
.admin-chat-panel.hidden {
  display: none;
}

.admin-chat-panel-header {
  padding: .75rem 1rem; border-bottom: 1px solid var(--mrln-border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; gap: .5rem;
}
.admin-chat-header-actions {
  display: flex; align-items: center; gap: .35rem; flex-shrink: 0;
}
.admin-chat-clear {
  background: none; border: 1px solid var(--mrln-border);
  border-radius: var(--mrln-r); color: var(--mrln-text-3);
  cursor: pointer; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s;
}
.admin-chat-clear:hover { color: var(--mrln-err); border-color: var(--mrln-err); }
.admin-chat-clear.hidden { display: none; }
.admin-chat-panel-title {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--mrln-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--mrln-text-2);
}
.admin-chat-online-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mrln-ok); display: inline-block;
}
.admin-chat-close {
  background: none; border: 1px solid var(--mrln-border);
  border-radius: var(--mrln-r); color: var(--mrln-text-3);
  cursor: pointer; width: 24px; height: 24px;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s;
}
.admin-chat-close:hover { color: var(--mrln-text); border-color: var(--mrln-border-md); }

/* Back button in header */
.admin-chat-back {
  background: none; border: none; color: var(--mrln-text-3); cursor: pointer;
  display: flex; align-items: center; padding: 0 .25rem 0 0;
  transition: color .15s;
}
.admin-chat-back:hover { color: var(--mrln-text); }
.admin-chat-back.hidden { display: none; }

/* ── Conversation list view ─────────────────────────────── */
.admin-chat-conv-list {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column;
  padding: .5rem .75rem .75rem;
  overscroll-behavior: contain;
}
.admin-chat-conv-list.hidden  { display: none; }
.admin-chat-admins-picker.hidden { display: none; }
.admin-chat-msgs-view.hidden  { display: none; }

.admin-chat-conv-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .65rem; border-radius: var(--mrln-r);
  cursor: pointer; border: 1px solid transparent;
  transition: background .15s, border-color .15s;
  user-select: none;
}
.admin-chat-conv-item:hover {
  background: var(--mrln-bg-2); border-color: var(--mrln-border);
}
.admin-chat-conv-icon {
  font-family: var(--mrln-mono); font-size: 11px; color: var(--mrln-accent);
  font-weight: 600; flex-shrink: 0; width: 16px; text-align: center;
}
.admin-chat-conv-name {
  font-family: var(--mrln-mono); font-size: 11px; color: var(--mrln-text);
  font-weight: 500; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-chat-conv-arrow {
  color: var(--mrln-text-3); font-size: 10px; flex-shrink: 0;
}

.admin-chat-new-dm {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin-top: auto; padding-top: .75rem;
  background: none; border: 1px dashed var(--mrln-border);
  border-radius: var(--mrln-r); width: 100%; padding: .5rem;
  color: var(--mrln-text-3); font-family: var(--mrln-mono);
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  cursor: pointer; transition: color .15s, border-color .15s;
}
.admin-chat-new-dm:hover { color: var(--mrln-text); border-color: var(--mrln-border-md); }

/* ── Admin picker view ─────────────────────────────────── */
.admin-chat-admins-picker {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column;
  padding: .5rem .75rem .75rem;
  overscroll-behavior: contain;
}
.admin-chat-picker-hint {
  font-family: var(--mrln-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--mrln-text-3); padding: 0 .25rem .5rem;
}
.admin-chat-admin-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .65rem; border-radius: var(--mrln-r);
  cursor: pointer; border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.admin-chat-admin-item:hover {
  background: var(--mrln-bg-2); border-color: var(--mrln-border);
}
.admin-chat-admin-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--mrln-bg-3); border: 1px solid var(--mrln-border);
  font-family: var(--mrln-mono); font-size: 9px; color: var(--mrln-text-2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; text-transform: uppercase;
}
.admin-chat-admin-email {
  font-family: var(--mrln-mono); font-size: 11px; color: var(--mrln-text);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Conversation tabs ─────────────────────────────────── */
.admin-chat-conv-tabs {
  display: flex; overflow-x: auto; gap: .3rem;
  padding: .4rem .75rem; border-bottom: 1px solid var(--mrln-border);
  flex-shrink: 0; scrollbar-width: none;
}
.admin-chat-conv-tabs::-webkit-scrollbar { display: none; }
.admin-chat-conv-tab {
  flex-shrink: 0; padding: .2rem .5rem;
  background: none; border: 1px solid var(--mrln-border);
  border-radius: var(--mrln-r); cursor: pointer;
  font-family: var(--mrln-mono); font-size: 10px; color: var(--mrln-text-3);
  transition: all .15s; white-space: nowrap;
}
.admin-chat-conv-tab.active {
  background: var(--mrln-accent); color: var(--mrln-accent-fg);
  border-color: var(--mrln-accent);
}
.admin-chat-conv-tab:hover:not(.active) {
  color: var(--mrln-text); border-color: var(--mrln-border-md);
}

/* ── Messages view ─────────────────────────────────────── */
.admin-chat-msgs-view {
  flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}

/* Messages list */
.admin-chat-messages {
  flex: 1; overflow-y: auto; padding: .75rem 1rem;
  display: flex; flex-direction: column; gap: .4rem; align-items: stretch;
  scroll-behavior: smooth; overscroll-behavior: contain;
}
.admin-chat-loading {
  font-family: var(--mrln-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--mrln-text-3);
  text-align: center; padding: 2rem 0;
}

/* Message bubble */
.admin-chat-msg {
  display: flex; flex-direction: column; gap: .15rem;
  max-width: 82%; align-self: flex-start;
}
.admin-chat-msg.is-own { align-self: flex-end; align-items: flex-end; }

.admin-chat-msg-meta {
  display: flex; align-items: baseline; gap: .35rem;
  font-family: var(--mrln-mono); font-size: 11px; color: var(--mrln-text-3);
  padding: 0 .15rem;
}
.admin-chat-msg-sender { color: var(--mrln-text-2); font-weight: 600; }
.admin-chat-msg-time   { color: var(--mrln-text-3); font-weight: 400; }

.admin-chat-msg-content {
  font-size: 13px; line-height: 1.5; word-break: break-word; white-space: pre-wrap;
  padding: .4rem .65rem; border-radius: var(--mrln-r-lg);
  background: var(--mrln-bg-2); color: var(--mrln-text);
  border: 1px solid var(--mrln-border);
}
.admin-chat-msg.is-own .admin-chat-msg-content {
  background: var(--mrln-accent); color: var(--mrln-accent-fg);
  border-color: transparent;
}

.admin-chat-msg-delete {
  background: none; border: none; color: var(--mrln-text-3); cursor: pointer;
  font-size: 9px; opacity: 0; transition: opacity .15s; padding: 0 .25rem;
  font-family: var(--mrln-mono); text-transform: uppercase; letter-spacing: .05em;
}
.admin-chat-msg:hover .admin-chat-msg-delete { opacity: 1; }
.admin-chat-msg-delete:hover { color: var(--mrln-err); }
.admin-chat-msg.is-own .admin-chat-msg-meta { flex-direction: row-reverse; }
.admin-chat-msg.is-own .admin-chat-msg-delete { color: var(--mrln-accent-fg); opacity: 0; }
.admin-chat-msg.is-own:hover .admin-chat-msg-delete { opacity: .6; }
.admin-chat-msg.is-own .admin-chat-msg-delete:hover { opacity: 1; color: var(--mrln-accent-fg); }

/* Agent card in bubble */
.admin-chat-agent-card {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .15rem; padding: .3rem .55rem .3rem .35rem;
  background: var(--mrln-bg-3); border: 1px solid var(--mrln-border);
  border-radius: 999px; cursor: pointer;
  transition: border-color .15s;
}
.admin-chat-agent-card:hover { border-color: var(--mrln-accent); }
.admin-chat-agent-card-icon {
  flex-shrink: 0; width: 20px; height: 20px; color: var(--mrln-text-2, #aaa);
  display: flex; align-items: center; justify-content: center;
}
[data-theme="dark"] .admin-chat-agent-card-icon { color: #aaa; }
[data-theme="light"] .admin-chat-agent-card-icon { color: #555; }
.admin-chat-agent-card-icon svg { width: 14px; height: 14px; }
.admin-chat-agent-card-icon.has-img {
  width: 20px; height: 20px; border-radius: 50%;
  background-size: cover; background-position: center;
}
.admin-chat-agent-card-name {
  font-family: var(--mrln-mono); font-size: 11px; font-weight: 600;
  color: var(--mrln-text, #e8e8e8); white-space: nowrap;
}
[data-theme="dark"] .admin-chat-agent-card-name { color: #e8e8e8; }
[data-theme="light"] .admin-chat-agent-card-name { color: #111; }
.admin-chat-msg.is-own .admin-chat-agent-card {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25);
}
.admin-chat-msg.is-own .admin-chat-agent-card-name { color: #fff; }
.admin-chat-msg.is-own .admin-chat-agent-card-icon { color: rgba(255,255,255,.75); }

/* Preset card in bubble */
.admin-chat-preset-card {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .15rem; padding: .5rem .65rem;
  background: var(--mrln-bg-3); border: 1px solid var(--mrln-border);
  border-radius: var(--mrln-r-lg); cursor: pointer;
  transition: border-color .15s; max-width: 100%;
}
.admin-chat-preset-card:hover { border-color: var(--mrln-ok); }
.admin-chat-preset-card-icon {
  flex-shrink: 0; width: 24px; height: 24px; color: var(--mrln-ok);
  display: flex; align-items: center; justify-content: center;
}
.admin-chat-preset-card-icon svg { width: 16px; height: 16px; }
.admin-chat-preset-card-body { min-width: 0; flex: 1; }
.admin-chat-preset-card-name {
  font-family: var(--mrln-mono); font-size: 11px; font-weight: 600;
  color: var(--mrln-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-chat-preset-card-meta {
  font-family: var(--mrln-mono); font-size: 9px; color: var(--mrln-text-3);
  text-transform: uppercase; letter-spacing: .06em; margin-top: .1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-chat-preset-card-arrow {
  flex-shrink: 0; font-size: 16px; color: var(--mrln-text-3); line-height: 1;
}
.admin-chat-msg.is-own .admin-chat-preset-card {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25);
}
.admin-chat-msg.is-own .admin-chat-preset-card-name { color: #fff; }
.admin-chat-msg.is-own .admin-chat-preset-card-meta { color: rgba(255,255,255,.7); }
.admin-chat-msg.is-own .admin-chat-preset-card-icon { color: rgba(255,255,255,.75); }

/* Preset preview step */
.admin-chat-preset-preview-step {
  display: flex; align-items: center; gap: .4rem;
  padding: .3rem .4rem; border-radius: 6px;
  background: var(--mrln-bg-2); margin-bottom: .25rem;
}
.admin-chat-preset-preview-step-num {
  font-family: var(--mrln-mono); font-size: 10px; color: var(--mrln-text-3);
  min-width: 16px; text-align: right;
}
.admin-chat-preset-preview-step-name {
  font-family: var(--mrln-mono); font-size: 11px; color: var(--mrln-text); flex: 1;
}
.admin-chat-preset-preview-step-model {
  font-family: var(--mrln-mono); font-size: 9px; color: var(--mrln-text-3);
  text-transform: uppercase; letter-spacing: .05em;
}

/* Share picker modal */
.chat-share-picker {
  position: fixed; inset: 0; z-index: 20000;
  background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center;
}
.chat-share-picker-box {
  background: var(--mrln-bg-1); border: 1px solid var(--mrln-border-md);
  border-radius: var(--mrln-r-xl); padding: 1rem; width: 280px;
  box-shadow: 0 16px 48px rgba(0,0,0,.4);
}
.chat-share-picker-title {
  font-family: var(--mrln-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--mrln-text-3); margin-bottom: .65rem;
}
.chat-share-picker-item {
  display: flex; align-items: center; gap: .5rem; padding: .45rem .5rem;
  border-radius: var(--mrln-r); cursor: pointer; transition: background .15s;
  font-family: var(--mrln-mono); font-size: 11px; color: var(--mrln-text);
}
.chat-share-picker-item:hover { background: var(--mrln-bg-2); }
.chat-share-picker-icon { color: var(--mrln-accent); font-weight: 700; }
.chat-share-picker-cancel {
  margin-top: .6rem; width: 100%; background: none;
  border: 1px solid var(--mrln-border); border-radius: var(--mrln-r);
  padding: .35rem; font-family: var(--mrln-mono); font-size: 10px;
  color: var(--mrln-text-3); cursor: pointer; text-transform: uppercase;
  letter-spacing: .06em; transition: color .15s, border-color .15s;
}
.chat-share-picker-cancel:hover { color: var(--mrln-text); border-color: var(--mrln-border-md); }

/* Attachment in bubble */
.admin-chat-msg-attach { margin-top: .35rem; }
.admin-chat-msg-attach img {
  max-width: 100%; max-height: 200px; border-radius: var(--mrln-r);
  display: block; object-fit: contain; cursor: pointer;
}
.admin-chat-msg-attach-link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--mrln-mono); font-size: 10px;
  color: var(--mrln-accent); text-decoration: none;
  padding: .25rem .4rem; border: 1px solid var(--mrln-border);
  border-radius: var(--mrln-r); transition: border-color .15s;
}
.admin-chat-msg-attach-link:hover { border-color: var(--mrln-accent); }
.admin-chat-msg.is-own .admin-chat-msg-attach-link {
  color: var(--mrln-accent-fg); border-color: rgba(255,255,255,.3);
}

/* Load more */
.admin-chat-load-more {
  display: block; width: 100%; padding: .4rem; margin-bottom: .5rem;
  background: none; border: 1px solid var(--mrln-border);
  border-radius: var(--mrln-r); color: var(--mrln-text-3);
  font-family: var(--mrln-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .08em; cursor: pointer; transition: color .15s, border-color .15s;
}
.admin-chat-load-more:hover { color: var(--mrln-text); border-color: var(--mrln-border-md); }

/* Attach preview */
.admin-chat-attach-preview {
  padding: .4rem .75rem 0; display: flex; align-items: center; gap: .5rem;
  flex-shrink: 0;
}
.admin-chat-attach-preview.hidden { display: none; }
.admin-chat-attach-thumb {
  max-height: 60px; max-width: 80px; border-radius: var(--mrln-r);
  object-fit: cover; border: 1px solid var(--mrln-border);
}
.admin-chat-attach-name {
  font-family: var(--mrln-mono); font-size: 10px; color: var(--mrln-text-2);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-chat-attach-remove {
  background: none; border: none; color: var(--mrln-text-3); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 .2rem; flex-shrink: 0;
  transition: color .15s;
}
.admin-chat-attach-remove:hover { color: var(--mrln-err); }

/* Composer */
.admin-chat-composer {
  padding: .5rem .75rem; border-top: 1px solid var(--mrln-border);
  display: flex; gap: .4rem; align-items: flex-end; flex-shrink: 0;
}
.admin-chat-attach-btn {
  width: 32px; height: 32px; border-radius: var(--mrln-r);
  background: none; border: 1px solid var(--mrln-border);
  cursor: pointer; color: var(--mrln-text-3); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s;
}
.admin-chat-attach-btn:hover { color: var(--mrln-text); border-color: var(--mrln-border-md); }
.admin-chat-input {
  flex: 1; background: var(--mrln-bg-2); border: 1px solid var(--mrln-border);
  border-radius: var(--mrln-r); padding: .4rem .6rem; resize: none;
  font-size: 12px; color: var(--mrln-text); font-family: inherit;
  outline: none; max-height: 80px; overflow-y: auto; line-height: 1.4;
  transition: border-color .15s;
}
.admin-chat-input:focus { border-color: var(--mrln-border-md); }
.admin-chat-send {
  width: 32px; height: 32px; border-radius: var(--mrln-r);
  background: var(--mrln-accent); border: none; cursor: pointer;
  color: var(--mrln-accent-fg); display: flex; align-items: center; justify-content: center;
  transition: opacity .15s; flex-shrink: 0;
}
.admin-chat-send:hover  { opacity: .85; }
.admin-chat-send:disabled { opacity: .4; cursor: not-allowed; }

/* Header badge (punto indicador) */
.admin-chat-header-btn { position: relative; }
.admin-chat-header-badge {
  position: absolute; top: -3px; right: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mrln-accent);
}
.admin-chat-header-badge.hidden { display: none; }

/* Accessibility */
.admin-chat-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Responsive */
@media (max-width: 520px) {
  .admin-chat-panel { width: calc(100vw - 3rem); right: 1rem; }
}