Welcome to seasworth.ai

Your cool, personalized and super helpful AI buddy who saves you at any moment

🖼️ Photo
📁 File
📹 Video
.message-content img.generated-image { max-width: 400px; max-height: 400px; border-radius: 8px; margin-top: 10px; cursor: pointer; transition: transform 0.2s ease-in-out; } .message-content img.generated-image:hover { transform: scale(1.03); } .action-buttons { display: flex; gap: 8px; margin-top: 12px; } .action-buttons button { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: #fff; padding: 6px 12px; font-size: 13px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: background 0.2s; } .action-buttons button:hover { background: var(--accent1); } /* Recipe Styles */ .recipe-container { background: rgba(0,0,0,0.2); border-radius: 16px; padding: 20px; border: 1px solid rgba(122,43,255,0.3); } .recipe-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; } .diet-selector { display: flex; gap: 6px; flex-wrap: wrap; } .diet-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #ccc; padding: 8px 12px; border-radius: 20px; cursor: pointer; transition: all 0.2s; font-size: 12px; font-weight: 600; } .diet-btn.active, .diet-btn:hover { background: var(--accent1); border-color: var(--neon); color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(122,43,255,0.3); } .recipe-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; } .option-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(122,43,255,0.3); border-radius: 12px; padding: 16px; text-align: center; cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden; } .option-card:hover { background: rgba(122,43,255,0.15); border-color: var(--neon); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(122,43,255,0.4); } .option-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transition: left 0.5s; } .option-card:hover::before { left: 100%; } .option-icon { font-size: 2.2em; margin-bottom: 8px; } .option-card h4 { color: var(--neon); margin: 8px 0 4px 0; font-size: 14px; } .option-card p { color: #ccc; font-size: 12px; margin: 0; line-height: 1.3; } .ingredient-panel { background: rgba(0,0,0,0.3); border-radius: 12px; padding: 20px; margin-top: 15px; border: 1px solid rgba(122,43,255,0.2); } .quick-ingredients { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; } .quick-ingredient-btn { background: rgba(122,43,255,0.2); border: 1px solid rgba(122,43,255,0.4); color: white; padding: 6px 12px; border-radius: 15px; cursor: pointer; font-size: 12px; transition: all 0.2s; } .quick-ingredient-btn:hover { background: var(--accent1); transform: scale(1.05); } .ingredient-input-container { display: flex; gap: 8px; margin-bottom: 10px; } .ingredient-input-container input { flex: 1; padding: 12px; background: rgba(255,255,255,0.1); border: 1px solid var(--accent1); border-radius: 8px; color: white; font-size: 14px; } .ingredient-input-container input::placeholder { color: #888; } .add-btn { background: var(--accent1); color: white; border: none; padding: 12px 18px; border-radius: 8px; cursor: pointer; font-weight: bold; transition: all 0.2s; } .add-btn:hover { background: var(--accent2); transform: translateY(-1px); } .suggestions { max-height: 150px; overflow-y: auto; margin-bottom: 10px; } .suggestion-item { background: rgba(255,255,255,0.1); padding: 8px 12px; margin: 2px 0; border-radius: 6px; cursor: pointer; transition: background 0.2s; } .suggestion-item:hover { background: var(--accent1); } .selected-ingredients { margin: 15px 0; } .ingredient-tag { display: inline-block; background: var(--accent1); color: white; padding: 6px 12px; border-radius: 15px; margin: 3px; font-size: 12px; box-shadow: 0 2px 8px rgba(122,43,255,0.3); } .ingredient-tag button { background: none; border: none; color: white; margin-left: 8px; cursor: pointer; font-weight: bold; width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .ingredient-tag button:hover { background: rgba(255,255,255,0.2); } .panel-actions { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap; } .action-btn.primary { background: var(--green-neon); color: #000; } .action-btn.primary:hover, .action-btn.primary:active { background: #681fff; color: #fff; box-shadow: 0 0 15px #681fff; } .action-btn.secondary { background: rgba(255,255,255,0.1); color: #ccc; } .recipe-result { margin-top: 20px; } .recipe-content { background: #4a1a8a; border-radius: 12px; padding: 20px; color: #fff; border: 1px solid rgba(255,255,255,0.2); } .recipe-actions { display: flex; gap: 8px; flex-wrap: wrap; } .loading-text { font-size: 18px; font-weight: 600; color: var(--neon); animation: textPulse 2s ease-in-out infinite; } .delete-chat-btn { display: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: white; font-size: 22px; font-weight: bold; cursor: pointer; padding: 0 5px; opacity: 0.7; transition: opacity 0.2s; } .chat-item:hover .delete-chat-btn { display: block; } .delete-chat-btn:hover { opacity: 1; text-shadow: 0 0 8px var(--red-neon); } .image-loader-container { padding: 20px; background: rgba(0,0,0,0.2); border-radius: 12px; text-align: center; } .image-loader-animation { position: relative; width: 300px; height: 300px; margin: 15px auto 0; border-radius: 12px; background: rgba(0,0,0,0.3); overflow: hidden; } .image-loader-box { position: absolute; width: 100px; height: 100px; background: var(--neon); box-shadow: 0 0 35px var(--neon); animation: moveBox 12s cubic-bezier(0.65, 0, 0.35, 1) infinite; } @keyframes moveBox { 0% { top: 0; left: 0; border-radius: 50%; } 25% { top: calc(100% - 100px); left: calc(100% - 100px); border-radius: 0; } 50% { top: calc(100% - 100px); left: 0; border-radius: 50%; } 75% { top: 0; left: calc(100% - 100px); border-radius: 0; } 100% { top: 0; left: 0; border-radius: 50%; } } .command-builder { display: none; align-items: center; flex: 1; gap: 10px; } .command-builder .cmd-name { font-size: 16px; font-weight: 600; color: #fff; } .command-builder .param-input-box { display: flex; align-items: center; border: 1px solid #4f4f52; background: #2b2d31; border-radius: 6px; padding: 4px 8px; flex: 1; } .command-builder .param-input { background: transparent; border: none; outline: none; color: #fff; font-size: 16px; width: 100%; } .crypto-container .price-up, .crypto-list-item .price-up, .crypto-rec-card .price-up { color: var(--green-neon); } .crypto-container .price-down, .crypto-list-item .price-down, .crypto-rec-card .price-down { color: var(--red-neon); } .crypto-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;} .crypto-header h3 { margin: 0; } #crypto-refresh-btn { background: var(--accent1); border: none; color: white; padding: 6px 12px; border-radius: 6px; cursor: pointer; } #crypto-refresh-btn.active { background: var(--green-neon); color: #000; } .crypto-recommendations { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 20px; } .crypto-rec-card { background: rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 15px; text-align: center; border: 1px solid transparent; transition: all 0.2s ease-in-out; } .crypto-rec-card:hover { transform: translateY(-5px); border-color: var(--accent1); } .crypto-rec-card .crypto-icon { margin: 0 auto 10px auto; } .crypto-list { list-style: none; padding: 0; max-height: 400px; overflow-y: auto; } .crypto-list::-webkit-scrollbar { width: 4px; } .crypto-list::-webkit-scrollbar-thumb { background: var(--accent1); border-radius: 999px; } .crypto-list-item { display: flex; align-items: center; padding: 10px; margin-bottom: 8px; background: rgba(0, 0, 0, 0.2); border-radius: 8px; } .crypto-icon { width: 32px; height: 32px; margin-right: 12px; } .crypto-info { flex-grow: 1; } .crypto-name { font-weight: 600; } .crypto-symbol { color: #aaa; font-size: 14px; } .crypto-price-details { text-align: right; } .crypto-price { font-weight: 600; font-size: 16px; } .crypto-change { font-size: 14px; } .crypto-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--accent1), transparent); margin: 20px 0; border: 0; } /* Study & Quiz Styles */ .study-guide-container h3 { color: var(--neon); border-bottom: 1px solid var(--neon); padding-bottom: 5px; } #quiz-container, #quiz-setup-panel { margin-top: 20px; background: rgba(0,0,0,0.2); padding: 15px; border-radius: 12px;} .quiz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .quiz-question { font-size: 1.1em; font-weight: 600; margin-bottom: 15px; } .quiz-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .quiz-option { background: rgba(255,255,255,0.1); border: 1px solid transparent; color: #fff; padding: 12px; border-radius: 8px; cursor: pointer; transition: all 0.2s; text-align: left; } .quiz-option:hover { border-color: var(--accent1); } .quiz-option.correct { background: var(--green-neon) !important; color: #000 !important; border-color: var(--green-neon) !important; transform: scale(1.02); } .quiz-option.wrong { background: var(--red-neon) !important; color: #fff !important; border-color: var(--red-neon) !important; } .quiz-option:disabled { cursor: not-allowed; opacity: 0.7; } .quiz-results { text-align: center; } .quiz-progress { display: flex; align-items: center; gap: 15px; } .progress-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent1), var(--neon)); transition: width 0.3s ease; } .quiz-option { transition: all 0.3s ease; } .quiz-option.correct { animation: correctPulse 0.6s ease; } .quiz-option.wrong { animation: wrongShake 0.6s ease; } @keyframes correctPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes wrongShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .quiz-visual-progress { display: flex; align-items: center; justify-content: center; margin: 20px 0; flex-wrap: wrap; gap: 5px; } .progress-step { display: flex; align-items: center; } .progress-circle { width: 35px; height: 35px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 18px; transition: all 0.3s ease; } .progress-circle.correct { background: var(--green-neon); border-color: var(--green-neon); color: #000; box-shadow: 0 0 15px var(--green-neon); } .progress-circle.wrong { background: var(--red-neon); border-color: var(--red-neon); color: #fff; box-shadow: 0 0 15px var(--red-neon); } .progress-line { width: 30px; height: 3px; background: rgba(255,255,255,0.2); margin: 0 5px; } .quiz-setup-panel { padding: 35px !important; border-radius: 20px !important; box-shadow: 0 15px 40px rgba(122,43,255,0.25) !important; backdrop-filter: blur(15px) !important; min-height: 450px !important; width: 100% !important; max-width: 750px !important; margin: 0 auto !important; } .footer-tabs { display: flex; gap: 3px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); } .footer-tab { padding: 4px 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #ccc; border-radius: 6px; cursor: pointer; font-size: 9px; font-weight: 500; transition: all 0.2s; text-align: center; min-width: 50px; white-space: nowrap; } .footer-tab:hover { background: rgba(122,43,255,0.2); border-color: var(--neon); color: var(--neon); transform: translateY(-1px); box-shadow: 0 0 5px var(--neon); } .footer-tab.active { background: var(--neon) !important; border-color: var(--neon) !important; color: #000 !important; box-shadow: 0 0 15px var(--neon); font-weight: 600; } /* Enhanced footer tabs */ .footer-tabs { display: none; gap: 8px; margin-top: auto; padding: 15px 0; border-top: 1px solid rgba(122,43,255,0.3); } .footer-tab { padding: 10px 15px; background: rgba(0,0,0,0.3); border: 1px solid rgba(122,43,255,0.3); color: #ccc; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 600; transition: all 0.3s ease; text-align: center; flex: 1; position: relative; overflow: hidden; } .footer-tab::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(122,43,255,0.3), transparent); transition: left 0.5s; } .footer-tab:hover { background: rgba(122,43,255,0.2); border-color: var(--neon); color: var(--neon); transform: translateY(-2px); box-shadow: 0 0 15px rgba(122,43,255,0.5); } .footer-tab:hover::before { left: 100%; } .footer-tab:active { transform: translateY(0); box-shadow: 0 0 25px rgba(122,43,255,0.8); } /* Enhanced command selector */ #command-selector { display: none; position: absolute; bottom: 95px; left: 30px; width: calc(100% - 60px); max-height: 350px; overflow-y: auto; background: rgba(15, 25, 45, 0.95); border: 1px solid rgba(122,43,255,0.4); border-radius: 16px; box-shadow: 0 -10px 40px rgba(0,0,0,0.6), 0 0 25px rgba(122,43,255,0.6); padding: 15px; z-index: 9999; backdrop-filter: blur(15px); } .command-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; margin-bottom: 8px; background: rgba(0,0,0,0.2); } .command-item:hover { background: rgba(122,43,255,0.2); border-color: var(--neon); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(122,43,255,0.4); } .command-icon { width: 36px; height: 36px; font-size: 20px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent1), var(--accent2)); border-radius: 8px; box-shadow: 0 4px 12px rgba(122,43,255,0.3); flex-shrink: 0; } .command-name { font-weight: 700; color: #fff; font-size: 15px; margin-bottom: 2px; } .command-desc { font-size: 13px; color: #ccc; line-height: 1.3; } /* Enhanced delete button */ .delete-chat-btn { display: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: rgba(255,59,59,0.2); border: 1px solid var(--red-neon); color: var(--red-neon); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 14px; font-weight: bold; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; opacity: 0; } .chat-item:hover .delete-chat-btn { display: flex; opacity: 1; } .delete-chat-btn:hover { background: var(--red-neon); color: #fff; transform: translateY(-50%) scale(1.1); box-shadow: 0 0 15px var(--red-neon); } /* Media panel styling */ .media-panel { background: rgba(0,0,0,0.2); border-radius: 16px; padding: 20px; border: 1px solid rgba(122,43,255,0.3); margin: 10px 0; } .media-tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid rgba(122,43,255,0.3); padding-bottom: 10px; } .media-tab { padding: 8px 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(122,43,255,0.3); color: #ccc; border-radius: 6px; cursor: pointer; transition: all 0.2s; } .media-tab.active { background: var(--accent1); color: white; border-color: var(--neon); } .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; } .media-item { background: rgba(255,255,255,0.05); border-radius: 8px; padding: 10px; text-align: center; cursor: pointer; transition: all 0.2s; border: 1px solid transparent; } .media-item:hover { border-color: var(--neon); transform: translateY(-2px); } .media-item img { width: 100%; height: 100px; object-fit: cover; border-radius: 6px; } /* Media button styling */ .media-btn { display: block; width: 100%; padding: 12px; background: rgba(122,43,255,0.2); color: var(--neon); border: 1px solid rgba(122,43,255,0.3); border-radius: 12px; font-weight: 600; font-size: 15px; cursor: pointer; transition: all 0.3s; margin-bottom: 10px; text-decoration: none; text-align: center; } .media-btn:hover { background: rgba(122,43,255,0.3); border-color: var(--neon); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(122,43,255,0.3); } /* Enhanced footer tabs background */ .footer-tabs { display: flex; gap: 6px; margin-top: auto; padding: 15px; border-top: 1px solid rgba(122,43,255,0.3); background: rgba(0,0,0,0.2); border-radius: 12px 12px 0 0; } .footer-tab { padding: 10px 12px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(122,43,255,0.3); color: #ccc; border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 600; transition: all 0.3s ease; text-align: center; flex: 1; position: relative; overflow: hidden; backdrop-filter: blur(10px); } .footer-tab::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(122,43,255,0.3), transparent); transition: left 0.5s; } .footer-tab:hover { background: rgba(122,43,255,0.2); border-color: var(--neon); color: var(--neon); transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 25px rgba(122,43,255,0.4); } .footer-tab:hover::before { left: 100%; } .footer-tab:active { transform: translateY(-1px) scale(1.02); box-shadow: 0 0 25px rgba(122,43,255,0.8); } .footer-tab.active { background: var(--neon) !important; border-color: var(--neon) !important; color: #000 !important; box-shadow: 0 0 15px var(--neon); font-weight: 700; } /* Quick Access Boxes */ .quick-access-box { background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(122,43,255,0.3); border-radius: 16px; padding: 15px; margin-bottom: 10px; backdrop-filter: blur(10px); transition: all 0.3s ease; position: relative; overflow: hidden; cursor: pointer; } .quick-access-box::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(122,43,255,0.2), transparent); transition: left 0.5s; } .quick-access-box:hover { transform: translateY(-3px) scale(1.02); border-color: var(--neon); box-shadow: 0 8px 25px rgba(122,43,255,0.4); } .quick-access-box:hover::before { left: 100%; } .quick-access-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .quick-access-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--accent1), var(--accent2)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 15px rgba(122,43,255,0.3); transition: transform 0.3s ease; } .quick-access-box:hover .quick-access-icon { transform: scale(1.1) rotate(5deg); } .quick-access-text { flex: 1; } .quick-access-title { font-size: 14px; font-weight: 700; color: var(--neon); margin-bottom: 2px; } .quick-access-subtitle { font-size: 11px; color: #ccc; opacity: 0.8; } /* Interactive tab animations */ .interactive-tab { animation: tab-breathe 4s ease-in-out infinite; } .interactive-tab:nth-child(1) { animation-delay: 0s; } .interactive-tab:nth-child(2) { animation-delay: 1s; } .interactive-tab:nth-child(3) { animation-delay: 2s; } .interactive-tab:nth-child(4) { animation-delay: 3s; } /* Show footer tabs on mobile */ @media (max-width: 900px) { .footer-tabs { display: flex !important; } .quick-access-box { display: none; } } @keyframes tab-breathe { 0%, 100% { box-shadow: 0 0 5px rgba(122,43,255,0.2); } 50% { box-shadow: 0 0 15px rgba(122,43,255,0.4); } } /* Settings styles */ .setting-group { margin-bottom: 25px; padding: 20px; background: rgba(255,255,255,0.05); border: 1px solid rgba(122,43,255,0.2); border-radius: 12px; } .setting-group h3 { color: var(--neon); margin-bottom: 15px; font-size: 16px; } .language-selector { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; } .lang-option { padding: 8px 12px; background: rgba(122,43,255,0.2); border: 1px solid rgba(122,43,255,0.3); border-radius: 8px; color: #ccc; font-size: 12px; cursor: pointer; transition: all 0.3s ease; text-align: center; } .lang-option:hover, .lang-option.active { background: var(--accent1); color: #fff; transform: scale(1.05); box-shadow: 0 0 10px rgba(122,43,255,0.5); } .setting-btn { width: 100%; padding: 12px; background: linear-gradient(135deg, rgba(122,43,255,0.3), rgba(58,0,255,0.3)); border: 1px solid rgba(122,43,255,0.5); border-radius: 8px; color: var(--neon); font-size: 14px; cursor: pointer; transition: all 0.3s ease; margin-top: 10px; } .setting-btn:hover { background: linear-gradient(135deg, var(--accent1), var(--accent2)); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(122,43,255,0.4); }