Spaces:
Sleeping
Sleeping
File size: 2,612 Bytes
394b42f b89210e 394b42f b89210e 394b42f b89210e 394b42f b89210e 394b42f b89210e 394b42f b89210e 394b42f b89210e 7fc9b70 b89210e 394b42f b89210e 394b42f b89210e 394b42f b89210e 394b42f b89210e 394b42f b89210e 394b42f b89210e 394b42f 7fc9b70 b89210e 394b42f b89210e 7fc9b70 394b42f 7fc9b70 394b42f 7fc9b70 b89210e 394b42f b89210e 6235ee9 394b42f b89210e 394b42f b89210e 394b42f b89210e a7ebfef b89210e 394b42f 7fc9b70 394b42f 7fc9b70 e0f19d4 9ecfd68 7cc5855 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
/* Global Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}
html, body {
height: 100%;
width: 100%;
background: #f0f2f5;
overflow: hidden; /* Prevent page scroll */
}
/* Chat Container */
.chat-container {
position: fixed; /* Lock in place */
top: 0;
left: 0;
width: 100%;
height: 100%; /* Full page */
background: #fff;
border-radius: 0; /* No rounding on full-page layout */
display: flex;
flex-direction: column;
padding-bottom: 20px;
}
/* Chat Header */
.chat-header {
background-color: #10a37f;
padding: 10px;
text-align: center;
color: white;
font-size: 1.2rem; /* Reduced size */
font-weight: bold;
}
/* Chat Box */
.chat-box {
flex: 1; /* Fill remaining space */
padding: 20px;
display: flex;
flex-direction: column;
gap: 15px;
background-color: #fafafa;
overflow-y: auto; /* Scroll inside chat box only */
}
/* Messages */
.message {
max-width: 80%;
padding: 12px 18px;
border-radius: 16px;
font-size: 1rem;
line-height: 1.5; /* Better line spacing for Markdown */
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: break-word;
transform: translateY(20px);
opacity: 0;
animation: slide-in 0.3s forwards;
}
/* User messages */
.message.user {
align-self: flex-end;
background-color: #10a37f;
color: white;
}
/* Bot messages */
.message.bot {
align-self: flex-start;
background-color: #e5e5ea;
color: #000;
}
/* Lists inside messages */
.message ol,
.message ul {
margin: 0 0 0 1.2em; /* Proper indent inside bubble */
padding-left: 1.2em;
}
.message li {
margin-bottom: 0.3em; /* Space between items */
}
/* Chat Input */
.chat-input {
display: flex;
padding: 15px;
border-top: 1px solid #ddd;
background-color: #fff;
}
.chat-input textarea {
flex: 1;
padding: 12px;
border: 1px solid #ccc;
border-radius: 20px;
outline: none;
resize: none;
min-height: 40px;
max-height: 150px;
}
.chat-input button {
padding: 10px 18px;
margin-left: 10px;
background-color: #10a37f;
color: white;
border: none;
border-radius: 20px;
cursor: pointer;
}
.chat-input button:hover {
background-color: #0e8f6a;
}
/* Spinner */
.spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #10a37f;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
display: inline-block;
}
/* Animations */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes slide-in {
to {
transform: translateY(0);
opacity: 1;
}
}
|