|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.bubble { |
|
|
display: block !important; |
|
|
align-self: flex-start; |
|
|
background: #1f1f1f; |
|
|
color: #e8e8e8; |
|
|
border-radius: var(--bubble-radius, 1rem); |
|
|
line-height: 1.5; |
|
|
white-space: normal; |
|
|
font-family: 'Inter', sans-serif; |
|
|
font-size: 0.95rem; |
|
|
position: relative; |
|
|
opacity: 1 !important; |
|
|
animation: bubbleAppear 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; |
|
|
margin: 0.75rem 0; |
|
|
overflow-wrap: break-word; |
|
|
word-break: break-word; |
|
|
vertical-align: middle; |
|
|
padding: 1rem; |
|
|
box-sizing: border-box; |
|
|
max-width: 100%; |
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
|
border: 1px solid rgba(255, 255, 255, 0.05); |
|
|
transition: all 0.3s ease; |
|
|
min-height: 20px; |
|
|
user-select: text; |
|
|
} |
|
|
|
|
|
.bubble:hover { |
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); |
|
|
transform: translateY(-1px); |
|
|
} |
|
|
|
|
|
@keyframes bubbleAppear { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(10px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.bubble-user { |
|
|
align-self: flex-end; |
|
|
background: #2b2b2b; |
|
|
color: #fff; |
|
|
border-bottom-right-radius: 0.5rem; |
|
|
box-shadow: none; |
|
|
} |
|
|
|
|
|
.bubble-assist { |
|
|
align-self: flex-start; |
|
|
background: transparent; |
|
|
border: none; |
|
|
box-shadow: none; |
|
|
} |
|
|
|
|
|
.message-container { |
|
|
margin: 1rem 0; |
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.message-actions { |
|
|
display: flex; |
|
|
gap: 0.5rem; |
|
|
margin-top: 0.5rem; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
|
|
|
.message-container:hover .message-actions { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.action-btn { |
|
|
background: none; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
color: #3b82f6; |
|
|
font-size: 0.9rem; |
|
|
padding: 0.2rem 0.5rem; |
|
|
} |
|
|
|
|
|
.action-btn:hover { |
|
|
color: #60a5fa; |
|
|
} |
