/* ============================================================ Feedback widget global — botón flotante (toda la plataforma) Solo visible para usuarios logueados (ver feedback-widget.js). Anclado abajo-DERECHA. En /chat el composer también ancla sus controles a la esquina inferior derecha — si llegan a solaparse, ver .claude/rules/frontend-gotchas.md sobre el stacking context de .composer-card antes de tocar z-index. Vive como hijo directo de , fuera de .composer-card, así que nunca queda atrapado en su stacking context. ============================================================ */ #tg-fb-root { position: fixed; right: 20px; bottom: 20px; z-index: 999999; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } #tg-fb-btn { width: 50px; height: 50px; border-radius: 999px; border: none; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md); transition: transform 160ms cubic-bezier(0.16,1,0.3,1), background 120ms ease, box-shadow 160ms ease; padding: 0; } #tg-fb-btn:hover { background: var(--brand-hover); box-shadow: var(--shadow-lg); transform: translateY(-2px); } #tg-fb-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } #tg-fb-btn .tg-fb-glyph { font-size: 20px; line-height: 1; transition: transform 220ms cubic-bezier(0.16,1,0.3,1), opacity 120ms ease; } #tg-fb-root[data-state="open"] #tg-fb-btn .tg-fb-glyph { transform: rotate(90deg); } #tg-fb-panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(340px, calc(100vw - 40px)); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 16px; transform-origin: bottom right; transform: scale(0.94) translateY(6px); opacity: 0; pointer-events: none; transition: transform 160ms cubic-bezier(0.16,1,0.3,1), opacity 140ms ease; } #tg-fb-root[data-state="open"] #tg-fb-panel { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; } .tg-fb-title { font-size: 14.5px; font-weight: 600; color: var(--text); letter-spacing: -0.1px; margin: 0 0 12px; display: block; } .tg-fb-cats { display: flex; gap: 6px; margin-bottom: 10px; } .tg-fb-cat { flex: 1; padding: 7px 4px; font-size: 12.5px; font-weight: 500; font-family: inherit; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; text-align: center; white-space: nowrap; transition: color 120ms ease, background 120ms ease, border-color 120ms ease; } .tg-fb-cat:hover { color: var(--text); } .tg-fb-cat[aria-checked="true"] { background: var(--brand-15); border-color: var(--brand); color: var(--brand); } [data-theme="light"] .tg-fb-cat[aria-checked="true"] { color: var(--brand-hover); } .tg-fb-textarea, .tg-fb-email { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 13.5px; padding: 9px 10px; resize: none; transition: border-color 120ms ease; } .tg-fb-textarea { margin-bottom: 8px; line-height: 1.5; } .tg-fb-textarea:focus, .tg-fb-email:focus { outline: none; border-color: var(--brand); } .tg-fb-email { margin-bottom: 10px; } .tg-fb-email::placeholder, .tg-fb-textarea::placeholder { color: var(--text-muted); } .tg-fb-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .tg-fb-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tg-fb-status { font-size: 12px; color: var(--text-muted); flex: 1; } .tg-fb-status[data-tone="ok"] { color: var(--success); } .tg-fb-status[data-tone="error"] { color: var(--danger); } .tg-fb-submit { background: var(--brand); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 120ms ease, opacity 120ms ease; white-space: nowrap; } .tg-fb-submit:hover:not(:disabled) { background: var(--brand-hover); } .tg-fb-submit:disabled { opacity: 0.6; cursor: default; } @media (max-width: 480px) { #tg-fb-root { right: 14px; bottom: 14px; } #tg-fb-panel { width: calc(100vw - 28px); } } @media (prefers-reduced-motion: reduce) { #tg-fb-btn, #tg-fb-btn .tg-fb-glyph, #tg-fb-panel { transition: none !important; } }