| @@ -289,37 +289,8 @@ | ||
| 289 | 289 | |
| 290 | 290 | /* ======================================== |
| 291 | 291 | CODE BLOCKS & INLINE CODE |
| 292 | 292 | ======================================== */ |
| 293 | -.mxchat-table-wrapper { | |
| 294 | - overflow-x: auto; | |
| 295 | - margin: 12px 0; | |
| 296 | - -webkit-overflow-scrolling: touch; | |
| 297 | -} | |
| 298 | - | |
| 299 | -.mxchat-table { | |
| 300 | - width: 100%; | |
| 301 | - border-collapse: collapse; | |
| 302 | - font-size: 0.9em; | |
| 303 | - line-height: 1.4; | |
| 304 | -} | |
| 305 | - | |
| 306 | -.mxchat-table th, | |
| 307 | -.mxchat-table td { | |
| 308 | - padding: 8px 12px; | |
| 309 | - border: 1px solid rgba(128, 128, 128, 0.3); | |
| 310 | - word-break: break-word; | |
| 311 | -} | |
| 312 | - | |
| 313 | -.mxchat-table thead th { | |
| 314 | - font-weight: 600; | |
| 315 | - background: rgba(128, 128, 128, 0.15); | |
| 316 | -} | |
| 317 | - | |
| 318 | -.mxchat-table tbody tr:nth-child(even) { | |
| 319 | - background: rgba(128, 128, 128, 0.05); | |
| 320 | -} | |
| 321 | - | |
| 322 | 293 | .mxchat-code-block-container { |
| 323 | 294 | margin: 16px 0; |
| 324 | 295 | border-radius: 8px; |
| 325 | 296 | background: rgba(255, 255, 255, 0.1); |
| @@ -608,9 +579,8 @@ | ||
| 608 | 579 | .questions-toggle-btn svg, |
| 609 | 580 | .questions-collapse-btn svg { |
| 610 | 581 | transition: transform 0.2s ease; |
| 611 | 582 | fill: none; |
| 612 | - stroke: #212121; | |
| 613 | 583 | width: 25px; |
| 614 | 584 | height: 25px; |
| 615 | 585 | } |
| 616 | 586 | |
| @@ -1139,41 +1109,8 @@ | ||
| 1139 | 1109 | text-decoration: underline; |
| 1140 | 1110 | } |
| 1141 | 1111 | |
| 1142 | 1112 | /* ======================================== |
| 1143 | - INIT LOADER (shown while chat initializes) | |
| 1144 | - ======================================== */ | |
| 1145 | -.mxchat-init-loader { | |
| 1146 | - display: flex; | |
| 1147 | - align-items: center; | |
| 1148 | - justify-content: center; | |
| 1149 | - flex-grow: 1; | |
| 1150 | - min-height: 0; | |
| 1151 | - animation: fadeIn 0.3s ease-in-out; | |
| 1152 | -} | |
| 1153 | - | |
| 1154 | -.mxchat-init-loader-dots { | |
| 1155 | - display: flex; | |
| 1156 | - gap: 8px; | |
| 1157 | -} | |
| 1158 | - | |
| 1159 | -.mxchat-init-loader-dots .dot { | |
| 1160 | - width: 8px; | |
| 1161 | - height: 8px; | |
| 1162 | - border-radius: 50%; | |
| 1163 | - background-color: #888; | |
| 1164 | - animation: mxchat-dot-bounce 1.4s ease-in-out infinite both; | |
| 1165 | -} | |
| 1166 | - | |
| 1167 | -.mxchat-init-loader-dots .dot:nth-child(1) { | |
| 1168 | - animation-delay: -0.32s; | |
| 1169 | -} | |
| 1170 | - | |
| 1171 | -.mxchat-init-loader-dots .dot:nth-child(2) { | |
| 1172 | - animation-delay: -0.16s; | |
| 1173 | -} | |
| 1174 | - | |
| 1175 | -/* ======================================== | |
| 1176 | 1113 | THINKING DOTS ANIMATION |
| 1177 | 1114 | ======================================== */ |
| 1178 | 1115 | .chat-box .bot-message.temporary-message .thinking-dots-container { |
| 1179 | 1116 | display: flex; |
| @@ -1201,9 +1138,9 @@ | ||
| 1201 | 1138 | margin: 0 3px; |
| 1202 | 1139 | background-color: #fff; |
| 1203 | 1140 | border-radius: 50%; |
| 1204 | 1141 | display: inline-block; |
| 1205 | - animation: mxchat-dot-bounce 1.4s ease-in-out infinite both; | |
| 1142 | + animation: bounce 1.4s ease-in-out infinite both; | |
| 1206 | 1143 | vertical-align: middle; |
| 1207 | 1144 | } |
| 1208 | 1145 | |
| 1209 | 1146 | .chat-box .bot-message.temporary-message .thinking-dots .dot:first-child { |
| @@ -1213,9 +1150,9 @@ | ||
| 1213 | 1150 | .chat-box .bot-message.temporary-message .thinking-dots .dot:nth-child(2) { |
| 1214 | 1151 | animation-delay: -0.16s; |
| 1215 | 1152 | } |
| 1216 | 1153 | |
| 1217 | -@keyframes mxchat-dot-bounce { | |
| 1154 | +@keyframes bounce { | |
| 1218 | 1155 | 0%, 100%, 80% { |
| 1219 | 1156 | transform: scale(1); |
| 1220 | 1157 | } |
| 1221 | 1158 | 40% { |
| @@ -1370,34 +1307,28 @@ | ||
| 1370 | 1307 | right: 10px; |
| 1371 | 1308 | } |
| 1372 | 1309 | |
| 1373 | 1310 | .floating-chatbot { |
| 1374 | - width: calc(100vw - 16px); | |
| 1311 | + width: 100vw; | |
| 1375 | 1312 | /* Use multiple fallbacks for maximum browser compatibility */ |
| 1376 | - height: calc(100vh - 16px); /* Fallback */ | |
| 1377 | - height: calc(var(--vh, 1vh) * 100 - 16px); /* JS-set custom property fallback */ | |
| 1378 | - height: calc(100dvh - 16px); /* Modern dynamic viewport height */ | |
| 1379 | - max-height: calc(100vh - 16px); | |
| 1380 | - max-height: calc(100dvh - 16px); | |
| 1313 | + height: 100vh; /* Fallback */ | |
| 1314 | + height: calc(var(--vh, 1vh) * 100); /* JS-set custom property fallback */ | |
| 1315 | + height: 100dvh; /* Modern dynamic viewport height */ | |
| 1316 | + max-height: 100vh; | |
| 1317 | + max-height: 100dvh; | |
| 1381 | 1318 | margin: 0; |
| 1382 | 1319 | padding: 0; |
| 1383 | 1320 | position: fixed; |
| 1384 | - bottom: 8px; | |
| 1385 | - top: auto; | |
| 1386 | - left: 8px; | |
| 1387 | - right: 8px; | |
| 1388 | - border-radius: 16px; | |
| 1389 | - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); | |
| 1321 | + bottom: 0; | |
| 1322 | + top: 0; | |
| 1323 | + left: 0; | |
| 1324 | + right: 0; | |
| 1325 | + border-radius: 0; | |
| 1390 | 1326 | } |
| 1391 | 1327 | |
| 1392 | - .floating-chatbot .mxchat-chatbot-wrapper { | |
| 1393 | - border-radius: 16px; | |
| 1394 | - overflow: hidden; | |
| 1395 | - } | |
| 1396 | - | |
| 1397 | 1328 | .mxchat-chatbot-wrapper .chatbot-top-bar { |
| 1398 | - border-top-left-radius: 16px; | |
| 1399 | - border-top-right-radius: 16px; | |
| 1329 | + border-top-left-radius: 0; | |
| 1330 | + border-top-right-radius: 0; | |
| 1400 | 1331 | } |
| 1401 | 1332 | } |
| 1402 | 1333 | |
| 1403 | 1334 | |
| @@ -1584,9 +1515,8 @@ | ||
| 1584 | 1515 | |
| 1585 | 1516 | /* SVG styles - these are MISSING */ |
| 1586 | 1517 | .mxchat-popular-questions .mxchat-popular-questions-container .questions-collapse-btn svg { |
| 1587 | 1518 | fill: none; |
| 1588 | - stroke: #212121; | |
| 1589 | 1519 | transition: transform 0.2s ease; |
| 1590 | 1520 | width: 25px; |
| 1591 | 1521 | height: 25px; |
| 1592 | 1522 | } |
