GING-UPM/Eco-Friendly_Use
3
1*, *::before, *::after {2 box-sizing: border-box;3 margin: 0;4 padding: 0;5}6 7:root {8 --sz: 15px;9 --c0: #000;10 --c1: #333;11 --primary: #10a37f;12 --secondary: #1a7f64;13 --dark: #202123;14 --light: #f7f7f8;15 --gray: #343541;16 --success: #10a37f;17 --accent: #e5e5e5;18 --border-radius: 12px;19 --border-radius-lg: 16px;20 --box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);21 --transition: all 0.2s ease;22 --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;23 --bg-gradient: linear-gradient(180deg, #f0f4f9 0%, #ffffff 100%);24 --message-user: #10a37f;25 --message-ai: #7f56d9;26 --message-ai_2: #6731db;27 --message-ai_3: #5b1ae8;28 --message-error: #ef4444;29}30 31html, body {32 width: 100%;33 height: 100vh;34 overflow: hidden;35}36 37html {38 margin: 0;39 padding: 0;40 min-height: 100vh;41 width: 100vw;42 background: var(--gray);43 position: relative;44 overflow-x: hidden;45 color: var(--light);46}47 48html::before {49 content: '';50 position: absolute;51 top: 0;52 left: 0;53 right: 0;54 bottom: 0;55 background: 56 radial-gradient(circle at 20% 30%, rgba(16, 163, 127, 0.05), transparent 40%),57 radial-gradient(circle at 80% 70%, rgba(127, 86, 217, 0.05), transparent 40%);58 z-index: -1;59}60 61body {62 margin: 0;63 padding: 0;64 min-height: 100vh;65 background-color: transparent;66 display: flex;67 justify-content: center;68 align-items: center;69 height: 100vh;70 width: 100vw;71 position: fixed;72 top: 0;73 left: 0;74 overflow-x: hidden;75 font-family: var(--font-main);76}77 78#root {79 width: 100%;80 height: 100%;81 display: flex;82 justify-content: center;83 align-items: center;84 position: relative;85}86 87.chat-container {88 font-family: var(--font-main);89 width: 100%;90 max-width: 1000px;91 height: 100vh;92 margin: 0 auto;93 background: transparent;94 overflow: hidden;95 display: flex;96 flex-direction: column;97 justify-content: center;98 position: relative;99 z-index: 1;100 padding-bottom: 100px;101}102 103/* Header style for the container */104.chat-container::before {105 content: 'Which model should I use?';106 display: block;107 padding: 18px;108 text-align: center;109 color: var(--light);110 font-size: 16px;111 font-weight: 600;112 background: transparent;113 position: relative;114 letter-spacing: 0.3px;115}116 117.chat-container::after {118 display: none;119}120 121.message {122 width: auto;123 max-width: 90%;124 margin: 0;125 padding: 16px 20px;126 border-radius: var(--border-radius);127 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);128 transition: var(--transition);129 position: relative;130 overflow: hidden;131 font-size: 15px;132 line-height: 1.5;133}134 135.message p {136 margin: 0 0 8px 0;137}138 139.message p:last-child {140 margin-bottom: 0;141}142 143/* Add a messages container for scrolling */144.messages-container {145 flex: 1;146 overflow-y: auto;147 padding: 20px;148 display: flex;149 flex-direction: column;150 gap: 20px;151 scroll-behavior: smooth;152 height: calc(100% - 280px);153 min-height: 200px;154 background: transparent;155}156 157.messages-container::-webkit-scrollbar {158 width: 6px;159}160 161.messages-container::-webkit-scrollbar-track {162 background: rgba(255, 255, 255, 0.05);163 border-radius: 8px;164}165 166.messages-container::-webkit-scrollbar-thumb {167 background: rgba(255, 255, 255, 0.1);168 border-radius: 8px;169}170 171.messages-container::-webkit-scrollbar-thumb:hover {172 background: rgba(255, 255, 255, 0.15);173}174 175.user-message {176 background: var(--dark);177 margin-left: auto;178 border-bottom-right-radius: 4px;179 color: var(--light);180 padding-left: 16px;181 border-left: 3px solid var(--message-user);182}183 184.feedback-message {185 background: var(--dark);186 margin-right: auto;187 border-bottom-left-radius: 4px;188 color: var(--light);189 max-width: 90%;190 padding-left: 16px;191}192 193/* Enhanced success animation */194@keyframes success-pulse {195 0% { transform: scale(1); }196 50% { transform: scale(1.03); }197 100% { transform: scale(1); }198}199 200@keyframes success-glow {201 0% { box-shadow: 0 0 0 0 rgba(16, 163, 127, 0.6); }202 50% { box-shadow: 0 0 20px rgba(16, 163, 127, 0.4); }203 100% { box-shadow: 0 0 0 0 rgba(16, 163, 127, 0); }204}205 206.feedback-message.success {207 border-left: 3px solid var(--message-user);208 animation: success-pulse 0.7s ease-in-out, success-glow 1.5s ease-in-out infinite;209}210 211/* Enhanced error animation */212@keyframes shake {213 0%, 100% { transform: translateX(0) rotate(0); }214 15% { transform: translateX(-8px) rotate(-1deg); }215 30% { transform: translateX(7px) rotate(0.8deg); }216 45% { transform: translateX(-6px) rotate(-0.6deg); }217 60% { transform: translateX(5px) rotate(0.4deg); }218 75% { transform: translateX(-3px) rotate(-0.2deg); }219 90% { transform: translateX(2px) rotate(0.1deg); }220}221 222@keyframes error-glow {223 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }224 50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); }225 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }226}227 228.feedback-message.error {229 border-left: 3px solid var(--message-error);230 animation: shake 0.7s ease-in-out, error-glow 1.5s ease-in-out infinite;231}232 233.error-explanation {234 font-size: 0.9em;235 opacity: 0.7;236 margin-top: 10px;237 font-style: italic;238}239 240.answer-reveal {241 margin-top: 15px;242 padding-top: 15px;243 border-top: 1px solid rgba(255, 255, 255, 0.1);244}245 246.reveal-button {247 margin-top: 15px;248 padding: 8px 16px;249 background: transparent;250 border: 1px solid var(--primary);251 color: var(--primary);252 border-radius: var(--border-radius);253 font-size: 14px;254 cursor: pointer;255 transition: var(--transition);256}257 258.reveal-button:hover {259 background: rgba(16, 163, 127, 0.1);260}261 262button {263 flex: 1;264 padding: 10px 16px;265 border: 1px solid rgba(255, 255, 255, 0.1);266 border-radius: var(--border-radius);267 cursor: pointer;268 font-size: 14px;269 font-weight: 500;270 letter-spacing: 0.3px;271 transition: var(--transition);272 position: relative;273 overflow: hidden;274 background: var(--dark);275 color: var(--light);276}277 278button:hover {279 background: rgba(255, 255, 255, 0.05);280}281 282button:disabled {283 opacity: 0.5;284 cursor: not-allowed;285 background: rgba(255, 255, 255, 0.05);286}287 288.active {289 background: var(--primary);290 color: white;291 border-color: var(--primary);292}293 294button:not(.active) {295 background: var(--dark);296 color: var(--light);297}298 299.not-matching {300 position: relative;301}302 303.not-matching::after {304 content: 'ERROR';305 position: absolute;306 top: -10px;307 right: -10px;308 background: red;309 color: white;310 padding: 4px 8px;311 border-radius: 10px;312 font-size: 12px;313 font-weight: bold;314}315 316.modal-overlay {317 position: fixed;318 top: 0;319 left: 0;320 right: 0;321 bottom: 0;322 background-color: rgba(0, 0, 0, 0.3);323 display: flex;324 justify-content: center;325 align-items: center;326 z-index: 1000;327 backdrop-filter: blur(3px);328 animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);329}330 331@keyframes fadeIn {332 from { 333 opacity: 0;334 backdrop-filter: blur(0);335 }336 to { 337 opacity: 1;338 backdrop-filter: blur(3px);339 }340}341 342.modal {343 background: var(--dark);344 border-radius: var(--border-radius-lg);345 padding: 30px;346 max-width: 700px;347 width: 90%;348 font-family: var(--font-main);349 color: var(--light);350 border: 1px solid rgba(255, 255, 255, 0.1);351 animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);352}353 354@keyframes slideUp {355 from { 356 transform: translateY(40px);357 opacity: 0;358 }359 to { 360 transform: translateY(0);361 opacity: 1;362 }363}364 365.modal h2 {366 color: var(--light);367 margin-bottom: 24px;368 font-size: 24px;369 font-weight: 600;370 letter-spacing: 0.3px;371 opacity: 0.95;372}373 374.modal p {375 font-size: 16px;376 line-height: 1.6;377 margin-bottom: 32px;378 opacity: 0.9;379 font-weight: 400;380}381 382.modal button {383 background: var(--primary);384 color: white;385 border: none;386 padding: 12px 24px;387 border-radius: 8px;388 font-size: 15px;389 font-weight: 500;390 cursor: pointer;391 transition: all 0.2s ease;392 width: auto;393 margin: 0 auto;394 display: inline-flex;395}396 397.modal button:hover {398 background: var(--secondary);399 transform: translateY(-1px);400}401 402/* ...existing styles... */403 404.answer-button {405 position: absolute;406 right: -75px;407 top: 50%;408 transform: translateY(-50%);409 background: var(--primary);410 color: white;411 border: none;412 height: 36px;413 padding: 0 16px;414 border-radius: 8px;415 font-size: 14px;416 min-width: auto;417}418 419.answer-button:hover {420 background: var(--secondary);421}422 423.chat-input {424 padding-right: 100px;425}426 427/* ...rest of existing styles... */428 429[data-transform-origin=bottom] .ds-fade-in-zoom-in-enter,430[data-transform-origin=bottom] .ds-fade-in-zoom-in-exit {431 transform-origin: bottom;432}433 434[data-transform-origin=bottom\ left] .ds-fade-in-zoom-in-enter,435[data-transform-origin=bottom\ left] .ds-fade-in-zoom-in-exit {436 transform-origin: 0 100%;437}438 439[data-transform-origin=bottom\ right] .ds-fade-in-zoom-in-enter,440[data-transform-origin=bottom\ right] .ds-fade-in-zoom-in-exit {441 transform-origin: 100% 100%;442}443 444[data-transform-origin=top] .ds-fade-in-zoom-in-enter,445[data-transform-origin=top] .ds-fade-in-zoom-in-exit {446 transform-origin: top;447}448 449[data-transform-origin=top\ left] .ds-fade-in-zoom-in-enter,450[data-transform-origin=top\ left] .ds-fade-in-zoom-in-exit {451 transform-origin: 0 0;452}453 454[data-transform-origin=top\ right] .ds-fade-in-zoom-in-enter,455[data-transform-origin=top\ right] .ds-fade-in-zoom-in-exit {456 transform-origin: 100% 0;457}458 459[data-transform-origin=left] .ds-fade-in-zoom-in-enter,460[data-transform-origin=left] .ds-fade-in-zoom-in-exit {461 transform-origin: 0;462}463 464[data-transform-origin=right] .ds-fade-in-zoom-in-enter,465[data-transform-origin=right] .ds-fade-in-zoom-in-exit {466 transform-origin: 100%;467}468 469[data-transform-origin=center] .ds-fade-in-zoom-in-enter,470[data-transform-origin=center] .ds-fade-in-zoom-in-exit {471 transform-origin: 50%;472}473 474.ds-fade-in-zoom-in-enter {475 opacity: 0;476 transform: scale(.96);477}478 479.ds-fade-in-zoom-in-active {480 opacity: 1;481 transition: opacity var(--ds-ease-in) var(--ds-transition-duration-fast), 482 transform var(--ds-ease-in) var(--ds-transition-duration-fast);483 transform: scale(1);484}485 486.ds-fade-in-zoom-in-exit {487 opacity: 1;488 transform: scale(1);489}490 491.ds-fade-in-zoom-in-exit-active {492 opacity: 0;493 transition: opacity var(--ds-ease-out) var(--ds-transition-duration-fast),494 transform var(--ds-ease-out) var (--ds-transition-duration-fast);495 transform: scale(.96);496}497 498.standard-button, .answer-button {499 flex: 1;500 max-width: 120px;501 height: 44px;502 padding: 0 18px;503 border-radius: var(--border-radius);504 font-size: 14px;505 font-weight: 500;506 display: flex;507 align-items: center;508 justify-content: center;509 transition: var(--transition);510}511 512.standard-button {513 background: rgba(64, 65, 79, 0.9);514 color: var(--light);515 border: 1px solid rgba(255, 255, 255, 0.1);516}517 518.answer-button {519 background: var(--primary);520 color: white;521 border: none;522}523 524.standard-button.active {525 background: var(--primary);526 color: white;527 border-color: var(--primary);528 box-shadow: 0 0 0 1px rgba(16, 163, 127, 0.2);529}530 531.chat-input-container {532 position: relative;533 padding: 20px;534 background: transparent;535 width: 100%;536 display: flex;537 justify-content: center;538}539 540.chat-input-wrapper {541 position: relative;542 display: flex;543 flex-direction: column;544 gap: 12px;545 width: 100%;546 max-width: 600px;547 margin: 0 auto;548}549 550.button-group {551 display: flex;552 gap: 8px;553 margin-bottom: 4px;554 justify-content: center;555}556 557.input-with-button {558 position: relative;559 display: flex;560 width: 100%;561}562 563.chat-input {564 width: 100%;565 min-height: 50px;566 padding: 14px 16px;567 border-radius: var(--border-radius);568 border: 1px solid rgba(255, 255, 255, 0.2);569 background: rgba(64, 65, 79, 0.3);570 color: var(--light);571 font-size: 15px;572 line-height: 1.5;573 resize: none;574 outline: none;575 transition: var(--transition);576 font-family: var(--font-main);577 backdrop-filter: blur(8px);578}579 580.chat-input:focus {581 border-color: var(--primary);582 background: rgba(64, 65, 79, 0.4);583 box-shadow: 0 0 0 1px rgba(16, 163, 127, 0.2);584}585 586.chat-input::placeholder {587 color: rgba(255, 255, 255, 0.5);588}589 590.standard-button {591 background: transparent;592 color: var(--light);593 border: 1px solid rgba(255, 255, 255, 0.2);594 padding: 8px 16px;595 height: 36px;596 font-size: 13px;597 border-radius: 8px;598 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);599 flex: 0 0 auto;600 min-width: 90px;601}602 603.standard-button:hover {604 transform: translateY(-2px);605 background: rgba(255, 255, 255, 0.15);606 border-color: rgba(255, 255, 255, 0.4);607}608 609.standard-button.active {610 animation: none;611}612 613.thinking {614 display: flex;615 gap: 8px;616 padding: 16px 20px;617 background: var(--dark);618 border-radius: var(--border-radius);619 margin-right: auto;620 align-items: center;621 position: relative;622 border-left: 3px solid var(--message-ai);623 padding-left: 16px;624 overflow: hidden;625}626 627.dot {628 width: 10px;629 height: 10px;630 background: rgba(255, 255, 255, 0.8);631 border-radius: 50%;632 animation: bounce 1.4s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);633}634 635.dot:nth-child(1) { 636 animation-delay: -0.32s; 637 background: var(--message-ai);638}639 640.dot:nth-child(2) { 641 animation-delay: -0.16s; 642 background: var(--message-ai);643}644 645.dot:nth-child(3) {646 animation-delay: 0s; 647 background: var(--message-ai);648}649 650@keyframes bounce {651 0%, 80%, 100% { 652 transform: scale(0) translateY(0); 653 opacity: 0.3;654 }655 40% { 656 transform: scale(1.2) translateY(-10px); 657 opacity: 1;658 }659}660 661/* ...rest of existing code... */662 663/* Tooltip styles */664.tooltip-wrapper {665 position: relative;666 display: inline-block;667}668 669.tooltip {670 position: absolute;671 bottom: calc(100% + 10px);672 left: 50%;673 transform: translateX(-50%) translateY(15px);674 background: var(--dark);675 color: var(--light);676 padding: 12px 16px;677 border-radius: 8px;678 font-size: 13px;679 width: 200px;680 text-align: center;681 opacity: 0;682 visibility: hidden;683 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);684 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);685 border: 1px solid rgba(255, 255, 255, 0.1);686 pointer-events: none;687 z-index: 100;688 line-height: 1.4;689}690 691.tooltip::after {692 content: '';693 position: absolute;694 top: 100%;695 left: 50%;696 transform: translateX(-50%);697 border: 6px solid transparent;698 border-top-color: var(--dark);699}700 701.tooltip-wrapper:hover .tooltip {702 transform: translateX(-50%) translateY(0);703 opacity: 1;704 visibility: visible;705}706 707/* Input typing animation */708@keyframes typing {709 0% { width: 0; opacity: 0; }710 100% { width: 100%; opacity: 1; }711}712 713/* Default state - no animation */714.chat-input {715 opacity: 1;716 width: 100%;717 animation: none;718}719 720/* Only animate when new-prompt class is applied */721.chat-input.new-prompt {722 animation: typing 0.8s ease-out forwards;723}724 725/* ...rest of existing styles... */726 727/* Update button styles for independent selection */728.standard-button.active {729 background: var(--primary);730 color: white;731 border-color: var(--primary);732 box-shadow: 0 0 0 1px rgba(16, 163, 127, 0.2);733}734 735/* Remove the pulse animation from active buttons */736.standard-button.active {737 animation: none;738}739 740/* Message appear animation */741@keyframes messageAppear {742 0% {743 opacity: 0;744 transform: translateY(20px) scale(0.96);745 }746 100% {747 opacity: 1;748 transform: translateY(0) scale(1);749 }750}751 752/* Apply message animation only to user messages */753.user-message.message-appear {754 animation: messageAppear 0.5s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;755}756 757/* Remove message-appear animation from feedback messages that have their own animations */758.feedback-message.success.message-appear {759 animation: success-pulse 0.7s ease-in-out, success-glow 1.5s ease-in-out infinite;760}761 762.feedback-message.error.message-appear {763 animation: shake 0.7s ease-in-out, error-glow 1.5s ease-in-out infinite;764}765 766/* Add a basic appearance for thinking animation */767.thinking.message-appear {768 animation: messageAppear 0.5s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;769}770 771/* ...rest of existing styles... */772 773/* Corner images */774.corner-image {775 position: fixed;776 z-index: 0;777 pointer-events: none; /* So they don't interfere with interactions */778 opacity: 0.7;779 transition: opacity 0.3s ease;780}781 782.corner-image:hover {783 opacity: 1;784}785 786.corner-image-top-left {787 top: 20px;788 left: 20px;789 max-width: 120px;790 max-height: 120px;791 animation: floatAnimation 6s ease-in-out infinite;792}793 794.corner-image-bottom-right {795 bottom: 20px;796 right: 20px;797 max-width: 140px;798 max-height: 140px;799 animation: floatAnimation 8s ease-in-out infinite reverse;800}801 802@keyframes floatAnimation {803 0% {804 transform: translateY(0) rotate(0deg);805 }806 50% {807 transform: translateY(-15px) rotate(5deg);808 }809 100% {810 transform: translateY(0) rotate(0deg);811 }812}813 814/* Make sure images don't interfere with mobile layout */815@media (max-width: 768px) {816 .corner-image {817 max-width: 80px;818 max-height: 80px;819 }820 821 .corner-image-top-left {822 top: 10px;823 left: 10px;824 }825 826 .corner-image-bottom-right {827 bottom: 10px;828 right: 10px;829 }830}831 832/* Company logo in corner */833.company-logo {834 position: fixed;835 bottom: 20px;836 max-width: 280px; /* Much larger size */837 max-height: 140px; /* Much larger size */838 z-index: 5;839 opacity: 0.9;840 transition: opacity 0.3s ease, transform 0.3s ease;841}842 843.company-logo:hover {844 opacity: 1;845 transform: scale(1.05); /* Slight grow effect on hover */846}847 848/* Make sure logo doesn't interfere with mobile layout */849@media (max-width: 768px) {850 .company-logo {851 max-width: 180px; /* Larger but still reasonable for mobile */852 max-height: 90px;853 bottom: 10px;854 }855}856 857/* ...rest of existing styles... */858 859/* Add specific styling for the input tooltip */860.input-tooltip-wrapper {861 width: 100%;862 display: block;863}864 865.input-tooltip {866 width: 250px;867 bottom: calc(100% + 15px);868}869 870/* Ensure tooltip appears over the textarea */871.input-with-button .tooltip-wrapper {872 position: relative;873 width: 100%;874}875 876/* ...existing styles... */877 878/* Energy Animation at the top */879.energy-animation {880 position: fixed;881 top: -100px;882 left: 50%;883 transform: translateX(-50%);884 background: var(--dark);885 border-radius: var(--border-radius-lg);886 padding: 15px 25px;887 display: flex;888 align-items: center;889 gap: 15px;890 box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);891 z-index: 1000;892 border: 1px solid rgba(255, 255, 255, 0.1);893 transition: top 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.5);894 opacity: 0;895}896 897.energy-animation.show {898 top: 20px;899 opacity: 1;900}901 902.energy-icon {903 font-size: 28px;904 animation: pulse 2s infinite;905}906 907.energy-text {908 font-size: 16px;909 font-weight: 500;910 color: var(--light);911 max-width: 260px;912}913 914@keyframes pulse {915 0% {916 transform: scale(1);917 opacity: 1;918 }919 50% {920 transform: scale(1.2);921 opacity: 0.8;922 }923 100% {924 transform: scale(1);925 opacity: 1;926 }927}928 929/* Responsive design for the animation */930@media (max-width: 768px) {931 .energy-animation {932 width: 90%;933 padding: 12px 18px;934 }935 936 .energy-text {937 font-size: 14px;938 }939 940 .energy-icon {941 font-size: 24px;942 }943}944 945/* ...existing styles... */946 947/* Message send animation */948@keyframes messageSend {949 0% {950 opacity: 0;951 transform: translateY(30px) scale(0.9);952 }953 70% {954 opacity: 1;955 transform: translateY(-5px) scale(1.02);956 }957 100% {958 opacity: 1;959 transform: translateY(0) scale(1);960 }961}962 963.message-send-animation {964 animation: messageSend 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;965}966 967/* Stagger animations for multiple messages */968.messages-container > div:nth-child(2) {969 animation-delay: 0.15s;970}971 972.messages-container > div:nth-child(3) {973 animation-delay: 0.3s;974}975 976/* ...existing styles... */977 978/* Company logos in corners - both at the bottom */979.company-logo {980 position: fixed;981 bottom: 20px;982 max-width: 280px;983 max-height: 140px;984 z-index: 5;985 opacity: 0.9;986 transition: opacity 0.3s ease, transform 0.3s ease;987}988 989.company-logo:hover {990 opacity: 1;991 transform: scale(1.05); /* Slight grow effect on hover */992}993 994.company-logo-right {995 right: 20px;996}997 998.company-logo-left {999 left: 20px;1000}1001 1002/* Make sure logos don't interfere with mobile layout */1003@media (max-width: 768px) {1004 .company-logo {1005 max-width: 180px;1006 max-height: 90px;1007 bottom: 10px;1008 }1009 1010 .company-logo-right {1011 right: 10px;1012 }1013 1014 .company-logo-left {1015 left: 10px;1016 }1017}1018 1019/* ...existing styles... */1020 1021/* Updated Welcome Modal Example Styles */1022.modal-examples {1023 margin-top: 25px;1024 text-align: left;1025 border: 1px solid rgba(255, 255, 255, 0.1);1026 border-radius: var(--border-radius);1027 padding: 20px;1028 background-color: rgba(64, 65, 79, 0.3);1029 color: var(--light);1030 backdrop-filter: blur(8px);1031}1032 1033.modal-examples h3 {1034 margin-top: 0;1035 margin-bottom: 20px;1036 text-align: center;1037 color: var(--light);1038 font-size: 18px;1039 font-weight: 500;1040}1041 1042.button-example-container {1043 display: flex;1044 align-items: center;1045 margin-bottom: 12px;1046}1047 1048.button-example-container span {1049 margin-left: 12px;1050 font-size: 14px;1051 color: rgba(255, 255, 255, 0.7);1052}1053 1054.example-textarea {1055 width: 100%;1056 min-height: 40px;1057 border: 1px solid rgba(255, 255, 255, 0.2);1058 border-radius: var(--border-radius);1059 padding: 10px 12px;1060 background-color: rgba(64, 65, 79, 0.3);1061 font-size: 14px;1062 color: var(--light);1063 display: flex;1064 align-items: center;1065}1066 1067.modal-input-example, .modal-buttons-example, .modal-send-example {1068 margin-bottom: 18px;1069}1070 1071.button-example-container button.example, 1072.modal-send-example button.example {1073 pointer-events: none;1074 transform: none;1075 opacity: 1;1076}1077 1078.button-example-container .standard-button.example {1079 background: rgba(64, 65, 79, 0.9);1080 color: var(--light);1081 border: 1px solid rgba(255, 255, 255, 0.1);1082 max-width: 90px;1083 height: 36px;1084}1085 1086.button-example-container .reasoning-button.example {1087 background: transparent;1088}1089 1090.button-example-container .search-button.example {1091 background: transparent;1092}1093 1094.modal-send-example .answer-button.example {1095 background: var(--primary);1096 color: white;1097 position: static;1098 transform: none;1099 display: inline-flex;1100 margin: 0;1101}1102 1103.start-button {1104 margin-top: 25px;1105 background: var(--primary);1106 color: white;1107 padding: 12px 24px;1108 font-size: 16px;1109}1110 1111/* Make the modal match the app's style */1112.modal {1113 background: var(--dark);1114 border-radius: var(--border-radius-lg);1115 padding: 30px;1116 border: 1px solid rgba(255, 255, 255, 0.1);1117}1118 1119/* ...existing code... */1120