/* ayuda-widget.css — botón «¿Cómo lo conecto?» y su panel.
   Tokens de /css/classical.css (tinta, papel, oro solo en filetes y foco).
   Vive en landing, conecta, mcp, pricing y contact. Lo monta /js/ayuda-widget.js. */

.ay-root{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-family:var(--font-body);color:var(--color-text)}
.ay-root *{box-sizing:border-box}

/* El aviso «¿Abrir siempre LegalAtlas?» de la landing ocupa la misma esquina: mientras esté visible, el widget se retira. */
body:has(#always:not([hidden])) .ay-root{display:none}

.ay-fab{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 16px 9px 13px;border:1px solid var(--color-text);border-radius:999px;background:var(--color-bg);color:var(--color-text);font:600 13px/1 var(--font-body);letter-spacing:.03em;cursor:pointer;box-shadow:var(--shadow-md);transition:border-color .18s ease,color .18s ease,transform .18s ease}
.ay-fab:hover{border-color:var(--color-accent);color:var(--color-accent-deep);transform:translateY(-2px)}
.ay-fab svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ay-fab[aria-expanded="true"]{display:none}

.ay-panel{width:min(380px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 32px));display:flex;flex-direction:column;border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:var(--color-bg);box-shadow:var(--shadow-lg);overflow:hidden}
.ay-panel[hidden]{display:none}

.ay-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 16px 13px;border-bottom:1px solid var(--color-accent)}
.ay-title{margin:0;font:600 19px/1.2 var(--font-heading);letter-spacing:.005em}
.ay-sub{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:var(--color-muted)}
.ay-close{flex:none;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--color-divider);border-radius:var(--radius-md);background:transparent;color:var(--color-text);cursor:pointer}
.ay-close:hover{border-color:var(--color-accent);color:var(--color-accent-deep)}
.ay-close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

.ay-chips{display:flex;flex-wrap:wrap;gap:7px;padding:12px 16px 4px}
.ay-chip{padding:7px 11px;border:1px solid var(--color-divider);border-radius:999px;background:var(--color-surface);color:var(--color-text);font:500 12.5px/1 var(--font-body);cursor:pointer;transition:border-color .18s ease,color .18s ease}
.ay-chip:hover{border-color:var(--color-accent);color:var(--color-accent-deep)}
.ay-chip:disabled{opacity:.55;cursor:default}

.ay-log{flex:1 1 auto;min-height:0;overflow-y:auto;padding:10px 16px 6px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.ay-msg{max-width:92%;padding:10px 13px;border-radius:var(--radius-lg);font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.ay-msg--yo{align-self:flex-end;background:var(--color-text);color:var(--color-bg)}
.ay-msg--bot{align-self:flex-start;background:var(--color-surface);color:var(--color-text)}
.ay-msg--espera{color:var(--color-muted);font-style:italic}
.ay-links{align-self:flex-start;display:flex;flex-direction:column;gap:5px;margin:-4px 0 2px;padding-left:4px;border-left:1px solid var(--color-accent)}
.ay-links a{padding:3px 0 3px 9px;font-size:13px;color:var(--color-accent-deep);text-decoration:underline;text-underline-offset:3px}
.ay-links a:hover{color:var(--color-text)}

.ay-form{display:flex;gap:8px;padding:10px 16px 14px;border-top:1px solid var(--color-divider)}
.ay-input{flex:1 1 auto;min-width:0;min-height:42px;padding:9px 12px;border:1px solid var(--color-divider);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font:400 14px/1.3 var(--font-body)}
.ay-input::placeholder{color:var(--color-muted)}
.ay-input:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.ay-send{flex:none;min-height:42px;padding:0 15px;border:1px solid var(--color-text);border-radius:var(--radius-md);background:var(--color-text);color:var(--color-bg);font:600 13px/1 var(--font-body);cursor:pointer;transition:color .18s ease,background-color .18s ease,border-color .18s ease}
.ay-send:hover{color:var(--color-accent-deep);background:transparent;border-color:var(--color-accent)}
.ay-send:disabled{opacity:.5;cursor:default}
.ay-foot{margin:0;padding:0 16px 12px;font-size:11.5px;line-height:1.4;color:var(--color-muted)}

@media (max-width:600px){
  .ay-root{right:16px;bottom:16px;left:16px;align-items:stretch}
  .ay-fab{align-self:flex-end}
  .ay-panel{width:100%;max-height:min(78vh,calc(100vh - 32px))}
}
@media (prefers-reduced-motion:reduce){
  .ay-fab,.ay-chip,.ay-send,.ay-close{transition:none}
  .ay-fab:hover{transform:none}
  .ay-log{scroll-behavior:auto}
}
@media print{.ay-root{display:none}}