:root{--primary-color: #4f46e5;--user-message-bg: #4f46e5;--ai-message-bg: #F8F7FF;--text-color: #111827;--light-text: #6b7280;--border-color: #e2e8f0;--hover-color: #f3f4f6;--shadow-color: rgba(0, 0, 0, .1);* {margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;} body {background-color: #ffffff; color: var(--text-color); min-height: 100vh;} .app-container {max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; height: 100vh; background-color: #ffffff; box-shadow: 0 0 20px var(--shadow-color);} .app-header {padding: 1.25rem; text-align: center; border-bottom: 1px solid var(--border-color); background-color: white;} .chat-container {flex: 1; display: flex; flex-direction: column; padding: 0; overflow: hidden;} .chat-messages {flex: 1; overflow-y: auto; padding: .9375rem .9375rem 2rem; display: flex; flex-direction: column; background-color: #ffffff;} .message-wrapper {display: flex; margin-bottom: .5rem;} .message-wrapper.user-aligned {align-self: flex-end;} .message-wrapper.ai-aligned {align-self: flex-start;} .message-wrapper .imgs {width: 2.0625rem; height: 2.0625rem; margin-right: .3125rem;} .message-wrapper .text {font-size: .875rem; line-height: .875rem; color: #9BA3A3; font-weight: bold; margin-top: .25rem; margin-left: .25rem;} .user-message {margin-left: auto; background-color: var(--user-message-bg); color: white; border-radius: 9px; box-shadow: 0 2px 6px rgba(79,70,229,.2); padding: .5rem .625rem !important;} .ai-message {margin-right: auto; background-color: var(--ai-message-bg); border-radius: 9px; box-shadow: 0 2px 6px var(--shadow-color); margin-top: .25rem; color: #606060} .message {padding: 1rem .875rem .625rem .25rem; position: relative; max-width: 70vw; word-wrap: break-word; line-height: 1.5; font-size: 12px;} .copy {width: 2.625rem; height: 1.25rem; border-radius: .25rem; border: 2px solid #653FF4; font-size: .75rem; color: #653FF4; margin-top: .375rem; line-height: .85rem;} .message-actions {display: flex; justify-content: flex-end;} .message-input-area {width: 92.17%; height: 6.625rem; margin: 0 auto 2.625rem; background-color: #F8F7FF; border-radius: .75rem; position: relative; box-sizing: border-box; padding: 1rem 1rem 1rem .5625rem; display: flex; flex-direction: column; align-items: flex-end;} .message-input-area .refresh-button {position: absolute; top: -1.625rem; right: 0; cursor: pointer; display: flex; align-items: center;} .message-input-area .refresh-button .img {width: .8125rem; height: .8125rem;} .message-input-area .refresh-button .text {font-size: .8125rem; line-height: .8125rem; color: #818181; margin-left: .25rem;} .message-input-area textarea {width: 100%; border: 0; background: transparent; flex: 1; font-size: .75rem;} .message-input-area textarea:focus {outline: none;} .message-input-area textarea::placeholder {color: #A7ABAC;} .message-input-area button {background: transparent; border: 0; margin: 0; padding: 0;} .message-input-area .imgs {width: 1rem; height: 1rem;} .loading-indicator {display: flex; gap: .3rem; align-items: center; margin-left: auto;} .typing-dot {width: .6rem; height: .6rem; border-radius: 50%; background-color: var(--light-text); animation: typing 1.4s infinite both;} .typing-dot:nth-child(1) {animation-delay: 0s;} .typing-dot:nth-child(2) {animation-delay: .2s;} .typing-dot:nth-child(3) {animation-delay: .4s;} @keyframes typing {0% {transform: translateY(0); opacity: .4;} 50% {transform: translateY(-5px); opacity: 1;} 100% {transform: translateY(0); opacity: .4;}}}