diff --git a/html/kidsai/style.css b/html/kidsai/style.css index 2df9439..418392f 100755 --- a/html/kidsai/style.css +++ b/html/kidsai/style.css @@ -1568,37 +1568,43 @@ body { .reply-input-section { display: flex; - gap: 10px; + gap: 12px; align-items: flex-end; - margin-bottom: 15px; + margin: 20px 0; + padding: 15px; + background: rgba(255, 255, 255, 0.05); + border-radius: 15px; + border: 1px solid rgba(255, 255, 255, 0.1); } .ai-reply-input { flex: 1; padding: 10px 12px; - border: 2px solid rgba(255, 255, 255, 0.3); + border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 12px; - background: rgba(255, 255, 255, 0.2); - color: white; + background: rgba(255, 255, 255, 0.9); + color: #333; font-size: 0.9rem; resize: vertical; min-height: 44px; backdrop-filter: blur(10px); + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .ai-reply-input::placeholder { - color: rgba(255, 255, 255, 0.7); + color: rgba(0, 0, 0, 0.5); } .ai-reply-input:focus { outline: none; - border-color: rgba(255, 255, 255, 0.6); - background: rgba(255, 255, 255, 0.3); + border-color: #4CAF50; + background: rgba(255, 255, 255, 0.95); + box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2); } .reply-to-ai-btn { - background: rgba(255, 255, 255, 0.2); - border: 2px solid rgba(255, 255, 255, 0.3); + background: #4CAF50; + border: 2px solid #4CAF50; color: white; padding: 10px 16px; border-radius: 12px; @@ -1606,14 +1612,15 @@ body { font-weight: 600; cursor: pointer; transition: all 0.3s ease; - backdrop-filter: blur(10px); white-space: nowrap; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .reply-to-ai-btn:hover:not(:disabled) { - background: rgba(255, 255, 255, 0.3); - border-color: rgba(255, 255, 255, 0.5); + background: #45a049; + border-color: #45a049; transform: translateY(-1px); + box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3); } .reply-to-ai-btn:disabled { @@ -1642,20 +1649,26 @@ body { display: flex; gap: 10px; align-items: flex-start; - padding: 12px; - border-radius: 12px; - max-width: 90%; + padding: 15px; + border-radius: 15px; + max-width: 85%; + margin-bottom: 12px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .user-bubble { - background: rgba(255, 255, 255, 0.15); - border: 1px solid rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.9); + border: 1px solid rgba(255, 255, 255, 0.4); margin-left: auto; flex-direction: row-reverse; } +.user-bubble .bubble-text { + color: #333; +} + .ai-bubble { - background: rgba(76, 175, 80, 0.2); + background: rgba(76, 175, 80, 0.15); border: 1px solid rgba(76, 175, 80, 0.3); margin-right: auto; } @@ -1663,20 +1676,21 @@ body { .bubble-icon { font-size: 1.2rem; flex-shrink: 0; - width: 30px; - height: 30px; + width: 32px; + height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; - background: rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.3); } .bubble-text { color: white; - font-size: 0.9rem; - line-height: 1.4; + font-size: 0.95rem; + line-height: 1.5; flex: 1; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .user-bubble .bubble-text {