feat: Enhance package card styling and improve chat responsiveness

This commit is contained in:
2026-05-06 17:23:08 +02:00
parent 56182e0a24
commit dd092b65bc
3 changed files with 68 additions and 9 deletions
+11 -4
View File
@@ -28,16 +28,23 @@
<style>
.panel { margin-bottom: 1rem; }
.chat-box { background: #efeae2; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; }
.messages { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 0.8rem; max-height: 440px; overflow-y: auto; padding: 1rem 0; }
.message { max-width: 75%; padding: 0.5rem 0.75rem; border-radius: 10px; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,0.1); word-wrap: break-word; }
.chat-box { background: #efeae2; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; }
.messages { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 0.8rem; max-height: 50vh; overflow-y: auto; padding: 1rem 0; -webkit-overflow-scrolling: touch; }
.message { max-width: 85%; padding: 0.6rem 0.85rem; border-radius: 10px; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,0.1); word-wrap: break-word; }
.message.admin { align-self: flex-start; background: #ffffff; border-top-left-radius: 0; }
.message.user { align-self: flex-end; background: #dcf8c6; border-top-right-radius: 0; }
.message strong { display: block; font-size: 0.85rem; color: #075e54; margin-bottom: 0.2rem; }
.message p { margin: 0; font-size: 0.95rem; line-height: 1.4; }
.message small { display: block; text-align: right; font-size: 0.7rem; color: #888; margin-top: 0.3rem; }
.composer { display: flex; gap: 0.6rem; align-items: flex-end; }
textarea { flex-grow: 1; border: 1px solid #c9d8e3; border-radius: 20px; padding: 0.7rem 1rem; font: inherit; resize: none; background: #ffffff; }
textarea { flex-grow: 1; border: 1px solid #c9d8e3; border-radius: 20px; padding: 0.7rem 1rem; font: inherit; resize: none; background: #ffffff; font-size: 16px; }
button { flex-shrink: 0; width: fit-content; border: 1px solid #0a4c74; background: linear-gradient(120deg, #0c5a86 0%, #08486c 100%); color: #fff; padding: 0.6rem 1.2rem; border-radius: 999px; font-weight: 700; height: fit-content; margin-bottom: 0.2rem; }
@media (max-width: 600px) {
.composer { flex-direction: column; align-items: stretch; }
textarea { width: 100%; border-radius: 16px; }
button { width: 100%; padding: 0.8rem; }
.chat-box { padding: 0.8rem; border-radius: 12px; }
}
</style>
{% endblock %}