consultoria-as/Autoparts-DB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(pos): chatbot — mover boton arriba del carrito, fondo opaco, variables CSS

Browse Source 
- FAB movido a bottom:140px (arriba del carrito)
- Panel a bottom:200px
- Fondo usa --color-bg-elevated (opaco, no transparente)
- Bubbles usan --color-surface-2 con fallback
- Variables CSS inexistentes reemplazadas con equivalentes de tokens.css

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
consultoria-as
2026-04-02 07:33:34 +00:00
parent 230407b750
commit 9908c045c9
1 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
pos/static/css/chat.css
View File

@@ -7,7 +7,7 @@
.chat-fab {
position: fixed;
bottom: 72px; /* above F-keys footer */
bottom: 140px; /* above cart FAB and F-keys footer */
right: var(--space-5);
z-index: 8000;
width: 52px;
@@ -28,7 +28,7 @@
.chat-fab:hover {
transform: scale(1.08);
background: var(--color-accent-hover);
background: var(--color-primary-hover, #e5952f);
}
.chat-fab.has-unread::after {
@@ -46,7 +46,7 @@
.chat-panel {
position: fixed;
bottom: 72px;
bottom: 200px;
right: var(--space-5);
z-index: 8001;
width: 400px;
@@ -54,7 +54,7 @@
max-height: calc(100vh - 100px);
display: flex;
flex-direction: column;
background: var(--color-bg-surface);
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
@@ -121,7 +121,7 @@
max-width: 85%;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-lg);
font-size: var(--text-sm);
font-size: var(--text-body-sm, 0.875rem);
line-height: 1.45;
word-wrap: break-word;
}
@@ -130,14 +130,14 @@
align-self: flex-end;
background: var(--color-accent);
color: #fff;
border-bottom-right-radius: var(--radius-xs);
border-bottom-right-radius: var(--radius-sm, 4px);
}
.chat-msg.ai {
align-self: flex-start;
background: var(--color-bg-muted);
background: var(--color-surface-2, rgba(255,255,255,0.06));
color: var(--color-text-primary);
border-bottom-left-radius: var(--radius-xs);
border-bottom-left-radius: var(--radius-sm, 4px);
}
/* ─── Typing Indicator ─── */
@@ -147,9 +147,9 @@
display: none;
gap: 4px;
padding: var(--space-2) var(--space-3);
background: var(--color-bg-muted);
background: var(--color-surface-2, rgba(255,255,255,0.06));
border-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-xs);
border-bottom-left-radius: var(--radius-sm, 4px);
}
.chat-typing.visible { display: flex; }
@@ -179,7 +179,7 @@
}
.chat-part-card {
background: var(--color-bg-surface);
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-3);
@@ -195,19 +195,19 @@
.chat-part-card .part-number {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-size: var(--text-caption, 0.75rem);
color: var(--color-accent);
font-weight: var(--font-weight-semibold);
}
.chat-part-card .part-name {
font-size: var(--text-sm);
font-size: var(--text-body-sm, 0.875rem);
color: var(--color-text-primary);
margin-top: 2px;
}
.chat-part-card .part-stock {
font-size: var(--text-xs);
font-size: var(--text-caption, 0.75rem);
color: var(--color-text-muted);
margin-top: 2px;
}
@@ -233,7 +233,7 @@
border-radius: var(--radius-md);
background: var(--color-bg-base);
color: var(--color-text-primary);
font-size: var(--text-sm);
font-size: var(--text-body-sm, 0.875rem);
font-family: var(--font-body);
resize: none;
outline: none;
@@ -265,7 +265,7 @@
transition: background var(--duration-fast) var(--ease-in-out);
}
.chat-send-btn:hover { background: var(--color-accent-hover); }
.chat-send-btn:hover { background: var(--color-primary-hover, #e5952f); }
.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* ─── Vehicle Info Banner ─── */
@@ -277,7 +277,7 @@
border: 1px solid var(--color-accent);
border-left: 3px solid var(--color-accent);
border-radius: var(--radius-md);
font-size: var(--text-xs);
font-size: var(--text-caption, 0.75rem);
color: var(--color-text-secondary);
}