/* BarkThread - Custom Styles */
/* HERO PET VOICE SECTION - Most Prominent Element */
.hero-pet-voice-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--border-radius-xl);
padding: 3rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
margin: 0 auto 2rem auto;
max-width: 900px;
position: relative;
transition: var(--transition);
}
.hero-pet-voice-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-pet-voice-container {
position: relative;
z-index: 2;
text-align: center;
padding: 1rem;
}
.hero-voice-header {
margin-bottom: 2rem;
padding-left: 2rem;
text-align: center;
}
.hero-voice-title {
font-size: 1.4rem;
font-weight: 600;
color: #ffffff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 0.5rem;
line-height: 1.3;
}
.hero-voice-title i {
color: #f7fafc;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}
.hero-voice-subtitle {
font-size: 0.77rem;
color: #e2e8f0;
font-weight: 300;
font-style: italic;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.hero-pet-voice-card {
background: rgba(255, 255, 255, 0.95);
border-radius: var(--border-radius-xl);
padding: 1.8rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
max-width: 700px;
margin: 0 auto;
}
.hero-voice-content {
margin-bottom: 1.5rem;
}
.hero-pet-voice-text {
font-size: 0.91rem;
font-weight: 500;
color: #2d3748;
line-height: 1.5;
margin: 0;
font-family: inherit;
text-align: center;
quotes: """ """ "'" "'";
}
.hero-pet-voice-text::before {
content: "";
}
.hero-pet-voice-text::after {
content: "";
}
.hero-voice-footer {
border-top: 1px solid #e2e8f0;
padding-top: 1rem;
}
.hero-voice-attribution {
font-size: 0.9rem;
color: #718096;
font-style: italic;
font-weight: 400;
}
/* Dark mode adjustments for hero section */
[data-bs-theme="dark"] .hero-pet-voice-section {
background: linear-gradient(135deg, #4c1d95 0%, #581c87 100%);
border: 1px solid var(--border-light);
}
[data-bs-theme="dark"] .hero-pet-voice-card {
background: rgba(45, 55, 72, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .hero-pet-voice-text {
color: #f7fafc;
}
[data-bs-theme="dark"] .hero-voice-footer {
border-top: 1px solid #4a5568;
}
[data-bs-theme="dark"] .hero-voice-attribution {
color: #a0aec0;
}
/* Mobile responsiveness for hero section */
@media (max-width: 992px) {
.hero-pet-voice-section {
margin: 0 auto 2rem auto;
border-radius: var(--border-radius-xl);
}
}
@media (max-width: 768px) {
.hero-pet-voice-section {
padding: 1.2rem 0.8rem;
}
.hero-voice-header {
padding-left: 1rem;
}
.hero-voice-title {
font-size: 1.6rem;
}
.hero-voice-subtitle {
font-size: 1rem;
}
.hero-pet-voice-text {
font-size: 1.1rem;
line-height: 1.4;
}
.hero-pet-voice-card {
padding: 1.3rem;
margin: 0 auto;
}
.hero-pet-voice-text::before,
.hero-pet-voice-text::after {
font-size: 1.4rem;
}
}
@media (max-width: 480px) {
.hero-pet-voice-section {
padding: 1rem 0.5rem;
margin-bottom: 1.5rem !important;
}
.hero-voice-header {
margin-bottom: 1.2rem;
padding-left: 0.5rem;
}
.hero-voice-title {
font-size: 1.4rem;
}
.hero-voice-subtitle {
font-size: 0.9rem;
}
.hero-pet-voice-text {
font-size: 1rem;
line-height: 1.3;
}
.hero-pet-voice-card {
padding: 1rem;
margin: 0 auto;
}
.hero-voice-content {
margin-bottom: 1rem;
}
.hero-pet-voice-text::before,
.hero-pet-voice-text::after {
font-size: 1.2rem;
}
}
/* Header and Navigation Section Styling */
.header-section,
.navigation-section {
background: #ffffff;
border-radius: var(--border-radius-xl);
padding: 2.5rem 1.5rem; /* Increased vertical padding for better content spacing */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.1);
}
/* Pet Voice Container - Match Action Buttons Styling */
.pet-voice-container {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--border-radius-xl);
padding: 1.5rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: var(--transition);
max-width: 900px;
margin: 0 auto;
}
[data-bs-theme="dark"] .header-section,
[data-bs-theme="dark"] .navigation-section,
[data-bs-theme="dark"] .pet-voice-container {
background: rgba(45, 55, 72, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Desktop enhancements */
@media (min-width: 1200px) {
.hero-pet-voice-card {
max-width: 800px;
padding: 2rem;
}
}
/* View History Button Styling */
.btn[data-tooltip="view-history"] {
font-size: 0.7rem; /* 50% smaller than default 14px */
}
.btn[data-tooltip="view-history"] i {
font-size: 0.6rem; /* 50% smaller icon */
}
/* New Analysis Button Styling */
.btn[data-tooltip="new-analysis"] {
font-size: 0.7rem; /* 50% smaller than default 14px */
}
.btn[data-tooltip="new-analysis"] i {
font-size: 0.6rem; /* 50% smaller icon */
}
/* Compare Analyses Button Styling */
.btn[data-tooltip="compare-analyses"] {
font-size: 0.7rem; /* 50% smaller than default 14px */
}
.btn[data-tooltip="compare-analyses"] i {
font-size: 0.6rem; /* 50% smaller icon */
}
/* Pet Mode Toggle Button Styling */
.btn[data-tooltip="pet-mode-toggle"] {
font-size: 0.7rem; /* 50% smaller than default 14px */
}
.btn[data-tooltip="pet-mode-toggle"] i {
font-size: 0.6rem; /* 50% smaller icon */
}
/* Pet Mode Button Purple Color Styling */
#petModeToggle.btn-outline-info {
border-color: #8b5cf6 !important;
color: #8b5cf6 !important;
}
#petModeToggle.btn-outline-info:hover {
background-color: #8b5cf6 !important;
border-color: #8b5cf6 !important;
color: white !important;
}
#petModeToggle.btn-outline-info:focus,
#petModeToggle.btn-outline-info:active,
#petModeToggle.btn-outline-info.active {
background-color: #8b5cf6 !important;
border-color: #8b5cf6 !important;
color: white !important;
}
/* Theme Toggle Button Styling */
.btn[data-tooltip="theme-toggle"] {
font-size: 0.7rem; /* 50% smaller than default 14px */
}
.btn[data-tooltip="theme-toggle"] i {
font-size: 0.6rem; /* 50% smaller icon */
}
/* Install App Button Styling */
.btn[data-tooltip="install-app"] {
font-size: 0.7rem; /* 50% smaller than default 14px */
background: linear-gradient(135deg, var(--primary-color) 0%, #007bff 100%);
border: none;
box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
transition: all 0.3s ease;
}
.btn[data-tooltip="install-app"]:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4);
}
.btn[data-tooltip="install-app"] i {
font-size: 0.6rem; /* 50% smaller icon */
}
/* 3x2 Button Grid Layout */
.btn-grid-2x2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 8px;
max-width: 100%;
margin: 0 auto 16px auto;
}
.btn-grid-2x2 .btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 12px 16px;
min-height: 56px;
max-height: 56px;
font-size: 0.7rem;
border-radius: 6px;
transition: all 0.3s ease;
text-decoration: none;
aspect-ratio: 2.5/1;
}
.btn-grid-2x2 .btn i {
font-size: 0.5rem; /* 50% smaller icons for New Analysis and Return */
margin-right: 8px;
margin-bottom: 0;
display: inline-block;
}
.btn-grid-2x2 .btn .btn-text {
font-size: 0.65rem;
line-height: 1.2;
text-align: center;
white-space: nowrap;
}
.btn-grid-2x2 .btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.btn-grid-2x2 .btn-placeholder {
display: none;
}
/* Compact spacing for navigation sections */
.nav-controls {
margin-bottom: 20px;
}
.nav-controls small {
margin-top: 8px;
}
/* Reduce spacing around upload container */
.upload-container {
padding-top: 0;
}
.text-center.mb-4 {
margin-bottom: 20px !important;
}
.text-center.mb-5 {
margin-bottom: 24px !important;
}
/* Responsive adjustments */
@media (max-width: 576px) {
.btn-grid-2x2 {
gap: 4px;
max-width: 320px;
margin-bottom: 12px;
}
.btn-grid-2x2 .btn {
padding: 10px 12px;
min-height: 48px;
max-height: 48px;
}
.btn-grid-2x2 .btn i {
font-size: 0.45rem;
margin-right: 6px;
}
.btn-grid-2x2 .btn .btn-text {
font-size: 0.6rem;
}
.nav-controls {
margin-bottom: 16px;
}
.text-center.mb-4 {
margin-bottom: 16px !important;
}
.text-center.mb-5 {
margin-bottom: 20px !important;
}
}
/* Session Text Dark Mode Styling */
[data-theme="dark"] .text-muted {
color: var(--text-secondary) !important;
}
[data-theme="dark"] small.text-muted {
color: rgba(255, 255, 255, 0.7) !important;
}
/* Humor Section Styling */
.humor-section {
background: var(--bg-white);
border-radius: var(--border-radius-lg);
padding: 2rem;
box-shadow: var(--shadow-md);
margin-bottom: 2rem;
}
.humor-card {
background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-secondary) 100%);
border-radius: var(--border-radius);
padding: 2rem;
border: 1px solid var(--border-light);
}
.humor-style-badge {
margin-bottom: 1rem;
}
.humor-text {
font-size: 1.1rem;
line-height: 1.6;
color: var(--text-primary);
font-style: italic;
margin-bottom: 1rem;
}
.humor-controls .btn {
font-size: 0.875rem;
transition: var(--transition);
}
.humor-controls .btn:hover {
transform: translateY(-1px);
}
.alternative-humor-text {
padding: 1rem;
background: var(--bg-secondary);
border-radius: var(--border-radius);
border-left: 4px solid var(--primary-color);
}
/* Purple button style for personality quiz */
.btn-purple {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
border: none !important;
color: white !important;
transition: all 0.3s ease;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 10 !important;
}
.btn-purple:hover {
background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
color: white !important;
}
.btn-purple:focus,
.btn-purple:active {
background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
color: white !important;
}
/* Ensure quiz button is always visible */
#personality-quiz-btn {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Dark theme adjustments for humor section */
[data-theme="dark"] .humor-section {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
}
[data-theme="dark"] .humor-card {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
}
[data-theme="dark"] .alternative-humor-text {
background: var(--bg-primary);
border-left-color: var(--primary-color);
}
/* PWA Install Modal Dark Mode Styling */
[data-theme="dark"] .modal-content {
background-color: var(--bg-secondary);
border: 1px solid var(--border-light);
color: var(--text-primary);
}
[data-theme="dark"] .modal-header {
border-bottom-color: var(--border-light);
}
[data-theme="dark"] .modal-title {
color: var(--text-primary);
}
[data-theme="dark"] .modal-body {
color: var(--text-primary);
}
[data-theme="dark"] .ios-install-instructions {
color: var(--text-primary);
}
[data-theme="dark"] .ios-install-instructions ol li {
color: var(--text-primary);
}
[data-theme="dark"] .ios-install-instructions p {
color: var(--text-secondary);
}
/* Ensure modal backdrop works in dark mode */
[data-theme="dark"] .modal-backdrop {
background-color: rgba(0, 0, 0, 0.7);
}
/* Header Layout Styling */
.header-container {
padding: 0; /* Remove all container padding */
}
.brand-section {
text-align: left;
}
.brand-header {
margin-bottom: 0;
display: flex;
align-items: center;
min-height: 120px; /* Reduced height - logo will determine actual height */
padding: 0.5rem 0; /* Minimal vertical padding */
}
.brand-text-section {
width: 60%; /* Increased from 40% to accommodate smaller logo section */
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start; /* Left align */
text-align: left; /* Left align text */
padding: 0 0 0 2rem; /* Increased left padding to move text further from logo */
}
.brand-text {
display: flex;
flex-direction: column;
justify-content: center;
height: 64px;
}
.brand-title-inline {
margin: 10px 0 8px 0; /* Increased top margin by 25% (8px * 1.25 = 10px) */
line-height: 1.1;
font-size: 2.5rem; /* Much larger for single row display */
font-weight: 700;
white-space: nowrap; /* Keep on single row */
text-align: left; /* Explicitly left align app name */
transform: translateX(50px); /* Move app name right, reduced by 50% */
}
.brand-subtitle {
margin: 0;
font-size: 0.147rem; /* Reduced by 50% from 0.294rem */
color: var(--text-secondary);
line-height: 1.2;
max-width: 280px; /* Force wrapping to two lines */
text-align: left; /* Left align tagline */
transform: translateX(50px); /* Move tagline right, reduced by 50% */
}
/* Navigation Container Styling */
.navigation-container {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--border-radius-xl);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
padding: 20px;
margin: 0 auto 30px auto;
max-width: 900px;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
gap: 12px;
align-items: stretch;
justify-items: stretch;
}
.navigation-container .btn {
min-height: 50px;
padding: 12px 16px;
font-size: 0.9rem;
border-radius: 8px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
gap: 8px;
min-width: 0;
}
.navigation-container .btn i {
font-size: 0.9rem;
flex-shrink: 0;
}
.navigation-container .btn .btn-text {
line-height: 1;
}
/* Theme button specific alignment fix */
#themeToggle {
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
#themeToggle i {
font-size: 0.9rem !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
vertical-align: baseline !important;
}
#themeToggle .btn-text {
font-size: 0.85rem !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
.btn-placeholder {
visibility: hidden;
height: 50px;
pointer-events: none;
}
/* Dark theme adjustments for navigation container */
[data-theme="dark"] .navigation-container {
background: rgba(45, 55, 72, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Session info styling */
.session-info-section {
width: 20%; /* Exactly 1/5 of total width for session ID */
max-width: 20%; /* Enforce maximum width constraint */
display: flex;
align-items: center;
justify-content: flex-start; /* Changed from flex-end to position left */
padding: 0 0 0 2rem; /* Changed padding to move session ID to left position */
overflow: hidden; /* Prevent session ID overflow */
}
.session-info {
text-align: left; /* Changed from right to left align */
word-break: break-word;
min-height: 60px;
}
.session-info small {
font-size: 0.9rem; /* Increased font size for better visibility */
color: var(--text-secondary);
}
/* Container alignment */
.header-container,
.upload-container,
.navigation-container,
.container {
max-width: 900px;
margin: 0 auto;
}
.header-container {
padding: 0 20px;
}
.navigation-container {
margin: 0 auto 30px auto;
padding: 20px;
}
/* Mobile-First Responsive Design - Completely Separate Sections */
/* DESKTOP/TABLET STYLES (768px and above) */
@media (min-width: 769px) {
.header-container {
padding: 0 20px;
}
.navigation-container {
max-width: 900px;
margin: 0 auto 30px auto;
padding: 20px;
}
.logo-section {
width: 20%;
padding: 0 0.25rem 0 1.2rem;
}
.logo-inline {
width: 144px;
height: 144px;
}
.brand-text-section {
width: 60%;
padding: 0 0 0 2rem;
}
.brand-title-inline {
font-size: 3.125rem; /* Increased by 25% from 2.5rem */
transform: translateX(50px);
}
.brand-subtitle {
font-size: 0.147rem;
transform: translateX(50px);
}
.session-info-section {
width: 20%;
justify-content: flex-start !important;
padding: 0 0 0 2rem;
text-align: left;
}
}
/* TABLET STYLES (768px only) */
@media (max-width: 768px) and (min-width: 577px) {
.header-container {
padding: 0 20px;
}
.navigation-container {
max-width: 900px;
margin: 0 auto 30px auto;
padding: 20px;
}
.logo-section {
width: 35%;
padding: 0;
}
.logo-inline {
width: 560px;
height: 560px;
}
.brand-text-section {
width: 45%;
padding: 0 0 0 0.5rem;
}
.brand-title-inline {
font-size: 1.8rem;
transform: translateX(0px) !important;
}
.brand-subtitle {
font-size: 0.9rem;
transform: translateX(0px) !important;
}
.session-info-section {
width: 20%;
padding: 0;
justify-content: flex-end !important;
}
}
/* MOBILE STYLES (576px and below) - Completely Independent */
@media (max-width: 576px) {
.header-container {
padding: 0 16px;
}
.navigation-container {
margin: 0 16px 30px 16px;
padding: 16px;
gap: 10px;
}
.navigation-container .btn {
min-height: 45px;
padding: 8px 10px;
font-size: 0.75rem;
gap: 6px;
}
.navigation-container .btn i {
font-size: 0.8rem;
}
.btn-placeholder {
height: 45px;
}
.brand-text {
height: 56px;
}
.brand-header {
padding: 0.25rem 0;
min-height: 80px;
}
/* MOBILE-SPECIFIC LOGO SECTION */
.logo-section {
width: 25% !important; /* Smaller logo area on mobile */
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
}
.logo-inline {
width: 80px !important; /* Much smaller logo for mobile */
height: 80px !important;
}
/* MOBILE-SPECIFIC TEXT SECTION */
.brand-text-section {
width: 55% !important; /* More space for text */
padding: 0 0 0 8px !important; /* Minimal left padding */
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
}
.brand-title-inline {
font-size: 1.1rem !important; /* Optimal mobile size */
transform: none !important; /* No transforms on mobile */
margin: 8px 0 4px 0 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
.brand-subtitle {
font-size: 0.6rem !important; /* Reduced by 20% from 0.75rem */
transform: none !important; /* No transforms on mobile */
margin: 0 !important;
max-width: 200px !important;
line-height: 1.3 !important;
text-align: left !important;
}
/* MOBILE-SPECIFIC SESSION SECTION */
.session-info-section {
width: 20% !important;
padding: 0 !important;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
text-align: right !important;
}
.session-info {
text-align: right !important;
font-size: 0.7rem !important;
}
.session-info {
max-width: 20%;
padding-top: 2px;
}
.session-info small {
font-size: 0.65rem;
}
/* Upload area mobile adjustments */
.upload-header {
gap: 10px;
}
.upload-content .upload-icon {
font-size: 1.5rem; /* Further reduced for mobile */
}
.upload-title {
font-size: 1.2rem; /* Adjusted for mobile */
}
.upload-description {
font-size: 0.75rem;
}
.upload-formats {
font-size: 0.6rem;
}
.upload-btn {
font-size: 0.75rem;
padding: 0.75rem 1.5rem;
}
/* Navigation container mobile alignment */
.navigation-container {
max-width: 900px;
margin: 0 auto 30px auto;
padding: 15px;
}
.navigation-container .btn {
min-height: 45px;
padding: 8px 10px;
font-size: 0.8rem;
flex-direction: column;
gap: 4px;
}
.navigation-container .btn i {
font-size: 0.85rem;
}
.navigation-container .btn .btn-text {
font-size: 0.75rem;
font-weight: 500;
}
}
/* Pet Mode Adaptive Text Styling */
[data-pet-mode="dog"] .pet-adaptive-text::before {
content: "dog";
}
[data-pet-mode="cat"] .pet-adaptive-text::before {
content: "cat";
}
[data-pet-mode="dog"] .pet-adaptive-plural::before {
content: "dogs";
}
[data-pet-mode="cat"] .pet-adaptive-plural::before {
content: "cats";
}
[data-pet-mode="dog"] .pet-sound-text::before {
content: "bark";
}
[data-pet-mode="cat"] .pet-sound-text::before {
content: "meow";
}
[data-pet-mode="dolphin"] .pet-sound-text::before {
content: "click";
}
[data-pet-mode="whale"] .pet-sound-text::before {
content: "song";
}
[data-pet-mode="music"] .pet-sound-text::before {
content: "melody";
}
[data-pet-mode="dog"] .pet-action-text::before {
content: "wagging";
}
[data-pet-mode="cat"] .pet-action-text::before {
content: "purring";
}
[data-pet-mode="dolphin"] .pet-action-text::before {
content: "swimming";
}
[data-pet-mode="whale"] .pet-action-text::before {
content: "singing";
}
[data-pet-mode="music"] .pet-action-text::before {
content: "playing";
}
/* Pet Mode Toggle Button Styling */
#petModeToggle {
transition: all 0.3s ease;
border-radius: 8px;
position: relative;
}
#petModeToggle:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
#petModeIcon {
transition: all 0.2s ease;
}
#petModeToggle:active #petModeIcon {
transform: scale(0.9);
}
/* Custom whale icon styling */
#petModeIcon.whale-icon {
width: 16px;
height: 16px;
background-image: url('/static/images/whale-icon.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
font-size: 0;
}
#petModeIcon.whale-icon::before {
content: '';
opacity: 0;
}
/* Dark theme whale icon */
[data-theme="dark"] #petModeIcon.whale-icon {
filter: invert(1) brightness(0.8);
}
:root {
--primary-color: #6B73FF;
--primary-dark: #5A63E8;
--secondary-color: #9B59B6;
--accent-color: #F39C12;
--success-color: #27AE60;
--warning-color: #F39C12;
--danger-color: #E74C3C;
--bg-primary: #FAFBFF;
--bg-secondary: #F8F9FA;
--bg-white: #FFFFFF;
--text-primary: #2C3E50;
--text-secondary: #7F8C8D;
--text-muted: #BDC3C7;
--border-light: #E8ECEF;
--border-medium: #D1D8DD;
--shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.07);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
--shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
--border-radius: 12px;
--border-radius-lg: 16px;
--border-radius-xl: 24px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Share Card Styles */
.share-card-container {
min-height: 600px;
max-height: 650px;
overflow: hidden;
position: relative;
}
.share-card-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 12px 20px;
backdrop-filter: blur(10px);
border-radius: 0 0 12px 12px;
}
.share-text-content {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 100px;
overflow: hidden;
}
.thread-echo-section,
.pet-voice-section {
flex-shrink: 1;
min-height: 0;
}
.thread-echo-text,
.pet-voice-text {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
/* Loading Spinner */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.95);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
backdrop-filter: blur(5px);
}
.loading-spinner {
width: 80px;
height: 80px;
border: 3px solid var(--border-light);
border-top: 3px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 20px;
}
.logo-spinner {
width: 100px;
height: 100px;
animation: spin-clockwise 2s linear infinite;
margin-bottom: 20px;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}
.loading-text {
font-size: 18px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 10px;
}
.loading-subtext {
font-size: 14px;
color: var(--text-secondary);
text-align: center;
max-width: 300px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes spin-clockwise {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.processing-dots::after {
content: '';
animation: dots 1.5s infinite;
}
@keyframes dots {
0%, 20% { content: ''; }
40% { content: '.'; }
60% { content: '..'; }
80%, 100% { content: '...'; }
}
/* Dark Theme Variables */
[data-theme="dark"] {
--primary-color: #8B5CF6;
--primary-dark: #7C3AED;
--secondary-color: #A855F7;
--accent-color: #F59E0B;
--success-color: #10B981;
--warning-color: #F59E0B;
--danger-color: #EF4444;
--bg-primary: #0F172A;
--bg-secondary: #1E293B;
--bg-white: #334155;
--text-primary: #F8FAFC;
--text-secondary: #CBD5E1;
--text-muted: #94A3B8;
--border-light: #475569;
--border-medium: #64748B;
--shadow-sm: 0 2px 4px rgba(0,0,0,0.4);
--shadow-md: 0 4px 6px rgba(0,0,0,0.5);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.6);
--shadow-xl: 0 20px 25px rgba(0,0,0,0.7);
}
/* Dark theme specific overrides */
[data-theme="dark"] body {
background: linear-gradient(135deg, var(--bg-primary) 0%, #1E293B 100%);
}
[data-theme="dark"] .btn-outline-secondary {
color: var(--text-secondary);
border-color: var(--border-medium);
}
[data-theme="dark"] .btn-outline-secondary:hover {
background-color: var(--bg-secondary);
border-color: var(--primary-color);
color: var(--primary-color);
}
[data-theme="dark"] .spectrum-card {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
}
[data-theme="dark"] .spectrum-value {
background: var(--bg-primary);
color: var(--text-primary);
}
[data-theme="dark"] .spectral-color-card {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
}
[data-theme="dark"] .understanding-card {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
}
[data-theme="dark"] .pet-mascot {
filter: brightness(1.1) contrast(1.1);
}
[data-theme="dark"] .mascot-speech-bubble {
background: var(--bg-secondary);
border-color: var(--primary-color);
color: var(--text-primary);
}
[data-theme="dark"] .thread-echo-card,
[data-theme="dark"] .pet-voice-card {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
}
[data-theme="dark"] .primary-emotion-card {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
}
[data-theme="dark"] .waveform-section {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
}
[data-theme="dark"] .spectral-section,
[data-theme="dark"] .emotion-palette-section {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
}
/* Dark theme analysis cards */
[data-theme="dark"] .card {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
color: var(--text-primary);
}
[data-theme="dark"] .card-title {
color: var(--text-primary);
}
[data-theme="dark"] .card-text {
color: var(--text-secondary);
}
[data-theme="dark"] .text-muted {
color: var(--text-muted) !important;
}
[data-theme="dark"] small.text-muted {
color: var(--text-muted) !important;
}
/* Dark theme card headers and content */
[data-theme="dark"] .card-header {
background: var(--bg-primary);
border-bottom: 1px solid var(--border-light);
color: var(--text-primary);
}
[data-theme="dark"] .card-body {
background: var(--bg-secondary);
color: var(--text-primary);
}
[data-theme="dark"] .analysis-preview small {
color: var(--text-muted) !important;
}
[data-theme="dark"] .progress {
background-color: var(--border-light);
}
[data-theme="dark"] .card h5 {
color: var(--text-primary);
}
[data-theme="dark"] .analysis-preview .text-muted {
color: var(--text-muted) !important;
}
/* Base Styles */
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
background: linear-gradient(135deg, var(--bg-primary) 0%, #F0F2FF 100%);
color: var(--text-primary);
line-height: 1.6;
min-height: 100vh;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.3;
margin-bottom: 1rem;
}
.brand-title {
font-size: 1.47rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.brand-title-inline {
font-size: 1.44rem; /* Reduced by 20% from 1.8rem */
font-weight: 700;
color: var(--primary-color);
margin-bottom: 0.5rem; /* Added spacing */
letter-spacing: -0.02em;
}
.brand-subtitle {
font-size: 1.1rem; /* Significantly increased for better visibility */
color: var(--text-secondary);
margin-bottom: 0;
font-weight: 400;
}
.section-title {
font-size: 0.735rem;
color: var(--text-primary);
margin-bottom: 2rem;
font-weight: 600;
}
/* Brand Logo */
.brand-logo {
width: 60px;
height: 60px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.brand-logo i {
font-size: 2.5rem;
color: var(--primary-color);
}
.logo-image {
width: 90px;
height: 90px;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
transition: var(--transition);
}
.logo-image:hover {
transform: scale(1.05);
filter: drop-shadow(0 3px 6px rgba(0,0,0,0.15));
}
.logo-section {
width: 20%; /* Reduced to 1/2 of previous 40% width */
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 0.25rem 0 1.2rem; /* Added 20% extra left padding from main border */
}
.logo-inline {
width: 144px; /* Reduced to 20% of 720px for desktop */
height: 144px;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
transition: var(--transition);
}
.logo-inline:hover {
transform: scale(1.05);
filter: drop-shadow(0 3px 6px rgba(0,0,0,0.15));
}
/* Dark theme logo adjustments */
[data-theme="dark"] .logo-image {
filter: drop-shadow(0 2px 4px rgba(255,255,255,0.1));
}
[data-theme="dark"] .logo-image:hover {
filter: drop-shadow(0 3px 6px rgba(255,255,255,0.2));
}
[data-theme="dark"] .logo-inline {
filter: drop-shadow(0 2px 4px rgba(255,255,255,0.1));
}
[data-theme="dark"] .logo-inline:hover {
filter: drop-shadow(0 3px 6px rgba(255,255,255,0.2));
}
/* Container Styles */
.upload-container, .results-container {
max-width: 900px;
margin: 0 auto;
padding: 3rem 2rem;
}
/* Header Section Center Alignment */
.header-section {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--border-radius-lg);
padding: 0.2rem; /* Reduced by 90% from 2rem */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: var(--transition);
max-width: 900px;
margin: 0 auto;
}
/* Dark theme header section */
[data-theme="dark"] .header-section {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
box-shadow: var(--shadow-lg);
}
/* Dark theme navigation section */
[data-theme="dark"] .navigation-section {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
box-shadow: var(--shadow-lg);
}
.header-section .header-container {
text-align: center;
}
.header-section .brand-header {
justify-content: center;
margin-bottom: 1rem;
}
.header-section .brand-text {
text-align: center;
}
.header-section .session-info {
text-align: center;
margin-top: 1rem;
}
/* Navigation Section Styling */
.navigation-section {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--border-radius-lg);
padding: 2rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: var(--transition);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
max-width: 900px;
margin: 0 auto;
}
/* Dark theme navigation section */
[data-theme="dark"] .navigation-section {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
box-shadow: var(--shadow-lg);
}
/* Button grid styling for direct placement in navigation-section */
.navigation-section .btn {
width: 100%;
min-height: 60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 8px 12px;
font-size: 0.9rem;
border-radius: 8px;
transition: all 0.2s ease;
}
.navigation-section .btn i {
font-size: 0.9rem;
margin-bottom: 4px;
}
.navigation-section .btn .btn-text {
font-size: 0.7rem;
line-height: 1.2;
text-align: center;
}
.navigation-section .btn-placeholder {
display: none;
}
/* Removed forced white background to allow dark theme */
/* Upload Form */
.upload-form-container {
background: var(--bg-white);
border-radius: var(--border-radius-xl);
padding: 3rem;
box-shadow: var(--shadow-lg);
margin-bottom: 3rem;
}
.upload-area {
border: 3px dashed var(--border-medium);
border-radius: var(--border-radius-lg);
padding: 4rem 2rem;
text-align: center;
transition: var(--transition);
cursor: pointer;
background: var(--bg-secondary);
}
.upload-area:hover {
border-color: var(--primary-color);
background: rgba(107, 115, 255, 0.05);
transform: translateY(-2px);
}
.upload-area.dragover {
border-color: var(--primary-color);
background: rgba(107, 115, 255, 0.1);
transform: scale(1.02);
}
/* Upload header with icon and title on same row */
.upload-header {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 1.5rem;
}
.upload-content .upload-icon {
font-size: 2rem; /* 50% reduction from 4rem */
color: var(--primary-color);
margin-bottom: 0;
display: inline-block;
}
.upload-title {
font-size: 1.44rem; /* 20% reduction from 1.8rem (original was likely 1.8rem based on h3) */
color: var(--text-primary);
margin-bottom: 0;
font-weight: 600;
}
.upload-description {
font-size: 0.825rem; /* 25% reduction from 1.1rem */
color: var(--text-secondary);
margin-bottom: 0.5rem;
}
.upload-formats {
font-size: 0.675rem; /* 25% reduction from 0.9rem */
color: var(--text-muted);
margin-bottom: 2rem;
}
.upload-btn {
padding: 1rem 2rem;
font-size: 0.825rem; /* 25% reduction from 1.1rem */
font-weight: 600;
border-radius: var(--border-radius);
transition: var(--transition);
}
.upload-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* File Preview */
.file-preview {
background: var(--bg-secondary);
border-radius: var(--border-radius);
padding: 2rem;
margin-top: 2rem;
}
.file-info {
display: flex;
align-items: center;
padding: 1rem;
background: var(--bg-white);
border-radius: var(--border-radius);
box-shadow: var(--shadow-sm);
}
.file-icon {
font-size: 2rem;
color: var(--primary-color);
margin-right: 1rem;
}
.file-details {
flex: 1;
}
.file-name {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.file-size {
font-size: 0.9rem;
color: var(--text-secondary);
}
.analyze-btn {
font-size: 1.2rem;
font-weight: 600;
padding: 1rem;
border-radius: var(--border-radius);
transition: var(--transition);
}
.analyze-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Loading State */
.loading-state {
text-align: center;
padding: 4rem 2rem;
}
.loading-spinner {
width: 80px;
height: 80px;
margin: 0 auto 2rem;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: pulse 2s infinite;
}
.loading-spinner i {
font-size: 2.5rem;
color: white;
animation: bounce 1.5s infinite;
}
.loading-title {
font-size: 1.05rem;
color: var(--text-primary);
margin-bottom: 1rem;
font-weight: 600;
}
.loading-description {
color: var(--text-secondary);
margin-bottom: 2rem;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
/* Results Styles */
.spectral-section {
background: var(--bg-white);
border-radius: var(--border-radius-xl);
padding: 3rem;
box-shadow: var(--shadow-lg);
}
.spectrum-card {
background: var(--bg-secondary);
border-radius: var(--border-radius);
padding: 1.5rem;
transition: var(--transition);
}
.spectrum-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.spectrum-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.spectrum-label {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-secondary);
}
.spectrum-label.left {
color: var(--primary-color);
}
.spectrum-label.right {
color: var(--text-muted);
}
.spectrum-value {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
background: var(--bg-white);
padding: 0.5rem 1rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-sm);
}
.spectrum-bar {
background: var(--border-light);
height: 8px;
border-radius: 4px;
overflow: hidden;
}
.spectrum-progress {
height: 100%;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 4px;
/* Transition will be controlled by JavaScript */
}
.spectrum-progress.spectrum-locked {
transition: none !important;
}
/* Ensure locked spectrum bars maintain their width */
.spectrum-progress.spectrum-locked {
position: relative !important;
}
/* Prevent any CSS resets on locked bars */
.spectrum-progress.spectrum-locked,
.spectrum-progress[data-final-width] {
width: var(--locked-width) !important;
min-width: var(--locked-width) !important;
max-width: var(--locked-width) !important;
transition: none !important;
animation: none !important;
}
/* Spectrum Slider Styles */
.spectrum-slider-container {
margin-top: 1rem;
}
.spectrum-slider {
position: relative;
height: 12px;
margin-bottom: 0.75rem;
}
.spectrum-track {
position: absolute;
width: 100%;
height: 100%;
background: var(--border-light);
border-radius: 6px;
}
.spectrum-fill {
position: absolute;
height: 100%;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 6px;
transition: width 0.3s ease;
}
.spectrum-thumb {
position: absolute;
top: -4px;
width: 20px;
height: 20px;
background: var(--bg-white);
border: 3px solid var(--primary-color);
border-radius: 50%;
box-shadow: var(--shadow-md);
transform: translateX(-50%);
transition: left 0.3s ease;
}
.spectrum-description {
text-align: center;
margin-top: 0.5rem;
}
.description-text {
font-size: 0.85rem;
font-weight: 600;
padding: 0.25rem 0.75rem;
border-radius: var(--border-radius);
display: inline-block;
}
/* Tendency color coding */
.tendency-warmth {
background-color: rgba(255, 107, 107, 0.1);
color: #FF6B6B;
}
.tendency-detachment {
background-color: rgba(108, 117, 125, 0.1);
color: #6C757D;
}
.tendency-certainty {
background-color: rgba(40, 167, 69, 0.1);
color: #28A745;
}
.tendency-ambiguity {
background-color: rgba(255, 193, 7, 0.1);
color: #FFC107;
}
.tendency-intensity {
background-color: rgba(220, 53, 69, 0.1);
color: #DC3545;
}
.tendency-restraint {
background-color: rgba(23, 162, 184, 0.1);
color: #17A2B8;
}
.tendency-coherence {
background-color: rgba(111, 66, 193, 0.1);
color: #6F42C1;
}
.tendency-conflict {
background-color: rgba(232, 62, 140, 0.1);
color: #E83E8C;
}
/* Dark theme adjustments for spectrum sliders */
[data-theme="dark"] .spectrum-track {
background: var(--border-medium);
}
[data-theme="dark"] .spectrum-thumb {
background: var(--bg-secondary);
border-color: var(--primary-color);
}
[data-theme="dark"] .tendency-warmth {
background-color: rgba(255, 107, 107, 0.2);
color: #FF8A8A;
}
[data-theme="dark"] .tendency-detachment {
background-color: rgba(148, 163, 184, 0.2);
color: #94A3B8;
}
[data-theme="dark"] .tendency-certainty {
background-color: rgba(34, 197, 94, 0.2);
color: #22C55E;
}
[data-theme="dark"] .tendency-ambiguity {
background-color: rgba(251, 191, 36, 0.2);
color: #FBBF24;
}
[data-theme="dark"] .tendency-intensity {
background-color: rgba(239, 68, 68, 0.2);
color: #EF4444;
}
[data-theme="dark"] .tendency-restraint {
background-color: rgba(6, 182, 212, 0.2);
color: #06B6D4;
}
[data-theme="dark"] .tendency-coherence {
background-color: rgba(139, 92, 246, 0.2);
color: #8B5CF6;
}
[data-theme="dark"] .tendency-conflict {
background-color: rgba(236, 72, 153, 0.2);
color: #EC4899;
}
/* Force the visual display if inline styles fail */
.spectrum-progress[data-final-width]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: var(--locked-width);
height: 100%;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 4px;
z-index: 1;
pointer-events: none;
}
/* Waveform Visualization */
.waveform-section {
background: var(--bg-white);
border-radius: var(--border-radius-xl);
padding: 3rem;
box-shadow: var(--shadow-lg);
}
.waveform-container {
background: linear-gradient(135deg, rgba(107, 115, 255, 0.03), rgba(155, 89, 182, 0.03));
border-radius: var(--border-radius-lg);
padding: 2rem;
border: 1px solid var(--border-light);
}
#waveformCanvas {
width: 100%;
height: 200px;
border-radius: var(--border-radius);
background: #1a1a2e;
box-shadow: var(--shadow-md);
display: block;
margin: 0 auto;
}
.waveform-controls {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.5rem;
max-width: 100%;
padding: 0 1rem;
}
.waveform-controls .btn {
font-weight: 600;
transition: all 0.3s ease;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.waveform-controls #playWaveform {
width: 120px;
max-width: 100%;
}
.waveform-controls #stopWaveform {
width: 80px;
max-width: 100%;
}
.waveform-controls .btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* Thread Echo & Pet Voice */
.thread-echo-section, .pet-voice-section {
background: var(--bg-white);
border-radius: 0;
padding: 3rem;
box-shadow: var(--shadow-lg);
}
.thread-echo-card, .pet-voice-card {
background: linear-gradient(135deg, rgba(107, 115, 255, 0.05), rgba(155, 89, 182, 0.05));
border-radius: 0;
padding: 2.5rem;
border-left: 4px solid var(--primary-color);
}
.thread-echo-text, .pet-voice-text {
font-size: 1.2rem;
line-height: 1.8;
color: var(--text-primary);
margin: 0;
font-style: italic;
font-weight: 400;
}
.pet-voice-text {
position: relative;
}
/* About & Understanding Sections */
.about-section, .understanding-section {
background: var(--bg-white);
border-radius: var(--border-radius-xl);
padding: 3rem;
box-shadow: var(--shadow-lg);
}
.feature-icon {
width: 42px;
height: 42px;
margin: 0 auto 0.7rem;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.05rem;
}
/* Feature overview text sizing (30% reduction) */
.about-section h4 {
font-size: 1.1rem; /* Reduced from ~1.5rem */
margin-bottom: 0.7rem;
}
.about-section p {
font-size: 0.875rem; /* Reduced from ~1.25rem */
line-height: 1.4;
}
/* Contextual Humor Injection Feature */
.humor-injection-section {
background: var(--bg-white);
border-radius: var(--border-radius-xl);
padding: 3rem;
box-shadow: var(--shadow-lg);
}
.humor-main-card {
background: linear-gradient(135deg, rgba(255, 193, 7, 0.05), rgba(220, 53, 69, 0.05));
border-radius: var(--border-radius-lg);
padding: 2rem;
border: 1px solid var(--border-light);
margin-bottom: 1.5rem;
}
.humor-header {
margin-bottom: 1.5rem;
text-align: center;
}
.humor-style-indicator {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.humor-style-badge {
background: linear-gradient(135deg, #FFC107, #FF6B35) !important;
color: white !important;
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.63rem; /* Reduced by 30% from 0.9rem */
text-transform: capitalize;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
.humor-style-badge:focus,
.humor-style-badge:active,
.humor-style-badge:hover {
background: linear-gradient(135deg, #FFC107, #FF6B35) !important;
color: white !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
.humor-context {
color: var(--text-secondary);
font-size: 0.595rem; /* Reduced by 30% from 0.85rem */
font-style: italic;
}
.humor-content {
text-align: center;
}
.primary-humor-text,
.alternative-humor-text {
font-size: 0.875rem; /* Reduced by 30% from 1.25rem */
line-height: 1.6;
color: var(--text-primary);
margin: 1.5rem 0;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.7);
border-radius: var(--border-radius);
border-left: 4px solid #FFC107;
font-style: italic;
position: relative;
}
.primary-humor-text::before,
.alternative-humor-text::before {
content: '"';
font-size: 3rem;
color: #FFC107;
position: absolute;
top: -10px;
left: 10px;
font-family: serif;
}
.humor-controls {
display: flex;
justify-content: center;
gap: 1rem;
margin: 1.5rem 0;
}
.humor-controls .btn {
border-radius: 20px;
padding: 0.5rem 1rem;
font-size: 0.595rem; /* Reduced by 30% from 0.85rem */
transition: all 0.3s ease;
}
.humor-controls .btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.humor-explanation {
background: var(--bg-secondary);
border-radius: var(--border-radius);
padding: 1.5rem;
margin-top: 1rem;
border-left: 4px solid var(--primary-color);
font-size: 0.7rem; /* Reduced by 30% from default */
}
.humor-explanation h6 {
color: var(--primary-color);
margin-bottom: 1rem;
font-size: 0.7rem; /* Reduced by 30% from default h6 size */
}
.emotional-factors {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border-light);
}
.humor-style-guide {
background: var(--bg-secondary);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
}
.guide-title {
color: var(--text-primary);
margin-bottom: 1rem;
text-align: center;
font-size: 0.7rem; /* Reduced by 30% from default h6 size */
}
.style-options {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
}
.style-option {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1rem;
background: var(--bg-white);
border-radius: var(--border-radius);
border: 2px solid transparent;
transition: all 0.3s ease;
cursor: pointer;
min-width: 80px;
}
.style-option:hover {
border-color: var(--primary-color);
background: rgba(107, 115, 255, 0.05);
transform: translateY(-2px);
}
.style-option.active {
border-color: #FFC107;
background: rgba(255, 193, 7, 0.1);
}
.style-option i {
font-size: 1.2rem;
color: var(--primary-color);
}
.style-option span {
font-size: 0.56rem; /* Reduced by 30% from 0.8rem */
font-weight: 500;
color: var(--text-primary);
text-align: center;
}
/* Dark theme humor styles */
[data-theme="dark"] .humor-injection-section {
background: var(--bg-secondary);
}
[data-theme="dark"] .humor-main-card {
background: var(--bg-primary);
border-color: var(--border-light);
}
[data-theme="dark"] .primary-humor-text,
[data-theme="dark"] .alternative-humor-text {
background: rgba(255, 255, 255, 0.1);
color: var(--text-primary);
}
[data-theme="dark"] .humor-explanation {
background: var(--bg-primary);
}
[data-theme="dark"] .humor-style-guide {
background: var(--bg-primary);
}
[data-theme="dark"] .style-option {
background: var(--bg-secondary);
}
[data-theme="dark"] .style-option:hover {
background: rgba(107, 115, 255, 0.15);
}
.understanding-title {
font-size: 1.05rem;
color: var(--text-primary);
margin-bottom: 2rem;
text-align: center;
}
.understanding-card {
background: var(--bg-secondary);
border-radius: var(--border-radius);
padding: 1.5rem;
height: 100%;
transition: var(--transition);
}
.understanding-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.understanding-card h5 {
color: var(--primary-color);
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.understanding-card p {
color: var(--text-secondary);
font-size: 0.9rem;
margin: 0;
}
/* Combined Dynamic Humor Section */
.combined-humor-section {
background: var(--bg-white);
border-radius: var(--border-radius-xl);
padding: 2rem;
box-shadow: var(--shadow-lg);
margin-bottom: 2rem;
}
.humor-main-card {
background: var(--bg-secondary);
border-radius: var(--border-radius);
padding: 1.5rem;
margin-bottom: 1rem;
}
.humor-header {
margin-bottom: 1rem;
}
.humor-style-indicator {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.humor-style-badge {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 0.375rem 0.875rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.humor-context {
color: var(--text-secondary);
font-size: 0.8rem;
font-style: italic;
}
.primary-humor-text {
background: var(--bg-white);
border-radius: var(--border-radius);
padding: 1.25rem;
font-size: 1.1rem;
font-style: italic;
color: var(--text-primary);
border-left: 4px solid var(--primary-color);
margin-bottom: 1rem;
line-height: 1.6;
}
.humor-controls {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.humor-controls .btn {
font-size: 0.875rem;
padding: 0.5rem 1rem;
border-radius: 20px;
transition: all 0.3s ease;
}
.humor-controls .btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.alternative-humor-text {
margin-top: 1rem;
animation: fadeIn 0.3s ease;
}
.humor-explanation {
margin-top: 1rem;
animation: fadeIn 0.3s ease;
}
.humor-style-selector {
background: var(--bg-white);
border-radius: var(--border-radius);
padding: 1.25rem;
margin-top: 1rem;
border: 2px dashed var(--border-light);
animation: fadeIn 0.3s ease;
}
.style-option-btn {
transition: all 0.3s ease;
border-radius: 8px;
padding: 0.75rem;
}
.style-option-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.humor-loading {
background: var(--bg-white);
border-radius: var(--border-radius);
margin-top: 1rem;
}
.humor-context-card {
background: linear-gradient(135deg, var(--bg-secondary), var(--bg-white));
border-radius: var(--border-radius);
padding: 1rem;
border: 1px solid var(--border-light);
}
.context-content h6 {
color: var(--primary-color);
font-weight: 600;
margin-bottom: 0.75rem;
}
.context-metrics {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.context-metric {
background: var(--bg-white);
padding: 0.375rem 0.75rem;
border-radius: 15px;
font-size: 0.8rem;
color: var(--text-secondary);
border: 1px solid var(--border-light);
}
/* Dark theme support for humor section */
[data-theme="dark"] .combined-humor-section {
background: var(--bg-secondary);
}
[data-theme="dark"] .humor-main-card {
background: var(--bg-primary);
}
[data-theme="dark"] .primary-humor-text {
background: var(--bg-secondary);
color: var(--text-primary);
}
[data-theme="dark"] .humor-style-selector {
background: var(--bg-secondary);
border-color: var(--border-color);
}
[data-theme="dark"] .humor-context-card {
background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
}
[data-theme="dark"] .context-metric {
background: var(--bg-primary);
border-color: var(--border-color);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile responsiveness for humor section */
@media (max-width: 768px) {
.humor-controls {
justify-content: center;
}
.humor-controls .btn {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
.context-metrics {
justify-content: center;
}
.humor-style-indicator {
justify-content: center;
text-align: center;
}
}
/* Actions */
.actions-section {
margin-top: 3rem;
}
/* Flash Messages */
.flash-messages {
margin-bottom: 2rem;
}
.alert {
border-radius: var(--border-radius);
border: none;
box-shadow: var(--shadow-sm);
}
/* Recording Interface Styles */
.upload-options {
max-width: 400px;
margin: 0 auto;
}
.upload-options .btn-group {
gap: 1rem;
}
.upload-options .btn-group .btn {
flex: 1;
}
/* Add to Home Screen button styling */
#installApp {
padding: 0.75rem 1.875rem; /* Increased from default 0.5rem 1.25rem by 50% */
}
.recording-area {
background: var(--bg-white);
border-radius: var(--border-radius-xl);
padding: 3rem;
text-align: center;
box-shadow: var(--shadow-lg);
border: 2px dashed var(--border-light);
transition: var(--transition);
}
.recording-content {
max-width: 400px;
margin: 0 auto;
}
.recording-visualizer {
margin-bottom: 2rem;
background: var(--bg-secondary);
border-radius: var(--border-radius);
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
}
#recordingCanvas {
border-radius: 8px;
background: var(--bg-white);
}
.recording-title {
font-size: 1.225rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1rem;
}
.recording-description {
color: var(--text-secondary);
margin-bottom: 2rem;
font-size: 1.1rem;
}
.recording-controls {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.recording-timer {
background: var(--danger-color);
color: white;
padding: 0.75rem 1.5rem;
border-radius: var(--border-radius);
font-weight: 600;
display: inline-block;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
}
.nav-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
/* Audio Comparison Styles */
.comparison-container {
background: var(--bg-white);
border-radius: var(--border-radius-xl);
padding: 2rem;
margin-top: 2rem;
box-shadow: var(--shadow-lg);
}
.comparison-timeline {
position: relative;
padding: 1rem 0;
}
.comparison-item {
display: flex;
align-items: center;
padding: 1rem;
margin-bottom: 1rem;
background: var(--bg-secondary);
border-radius: var(--border-radius);
transition: var(--transition);
}
.comparison-item:hover {
transform: translateX(5px);
box-shadow: var(--shadow-md);
}
.comparison-date {
min-width: 120px;
font-weight: 600;
color: var(--primary-color);
}
.comparison-emotion {
flex: 1;
margin: 0 1rem;
}
.comparison-trend {
font-size: 1.2rem;
color: var(--success-color);
}
/* Touch device optimizations */
.btn {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
min-height: 44px; /* Minimum touch target size */
min-width: 44px;
}
.upload-area {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.upload-area.has-file {
border-color: var(--primary-color);
background: linear-gradient(135deg, rgba(74, 144, 226, 0.1), rgba(80, 227, 194, 0.1));
}
/* Improved touch feedback for interactive elements */
.btn:active,
.btn:focus {
transform: scale(0.98);
transition: transform 0.1s ease;
}
.record-btn:active {
transform: scale(0.95);
}
/* Better modal handling on mobile */
.modal {
padding-right: 0 !important;
z-index: 1055 !important;
}
.modal-dialog {
margin: 0.5rem;
max-height: calc(100vh - 1rem);
width: calc(100vw - 1rem);
}
.modal-content {
max-height: calc(100vh - 2rem);
overflow-y: auto;
border-radius: 0.5rem;
}
.modal-backdrop {
z-index: 1050 !important;
}
/* iPhone specific modal fixes */
@media (max-width: 768px) {
.modal-dialog {
margin: 0.25rem;
max-width: calc(100vw - 0.5rem);
}
.modal-content {
border-radius: 0.25rem;
}
.modal-body {
padding: 1rem;
}
.modal-header {
padding: 0.75rem 1rem;
}
}
/* Improved navigation for mobile */
.nav-controls {
gap: 0.5rem;
}
@media (max-width: 576px) {
.nav-controls {
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.nav-controls .btn {
width: 100%;
max-width: 200px;
}
}
/* Swipe gesture indicator */
.swipe-hint {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.8rem;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.swipe-hint.show {
opacity: 1;
}
/* Interactive Share Card Animations */
.theme-selector {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
grid-template-rows: repeat(2, 1fr) !important;
gap: 10px;
margin-bottom: 1rem;
}
.theme-option {
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.theme-option:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}
.theme-option.active {
border-color: white;
box-shadow: 0 0 20px rgba(255,255,255,0.5);
}
.theme-option::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.1);
opacity: 0;
transition: opacity 0.3s ease;
}
.theme-option:hover::before {
opacity: 1;
}
.hashtag-tag {
cursor: pointer;
transition: all 0.3s ease;
user-select: none;
}
.hashtag-tag:hover {
transform: scale(1.05);
opacity: 0.8;
}
.hashtag-tag.selected {
background-color: var(--success-color) !important;
transform: scale(1.1);
}
.share-card-preview {
min-height: 400px;
border-radius: 20px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.generated-share-card {
transform: scale(0.8);
animation: cardSlideIn 0.8s ease forwards;
}
.generated-share-card.animated .floating-particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255,255,255,0.6);
border-radius: 50%;
animation: float 4s infinite ease-in-out;
}
.particle:nth-child(1) {
top: 20%;
left: 20%;
}
.particle:nth-child(2) {
top: 60%;
left: 80%;
}
.particle:nth-child(3) {
top: 80%;
left: 30%;
}
.particle:nth-child(4) {
top: 40%;
left: 70%;
}
@keyframes float {
0%, 100% {
transform: translateY(0px) scale(1);
opacity: 0.6;
}
50% {
transform: translateY(-20px) scale(1.2);
opacity: 1;
}
}
@keyframes cardSlideIn {
0% {
transform: scale(0.8) translateY(30px);
opacity: 0;
}
100% {
transform: scale(1) translateY(0);
opacity: 1;
}
}
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255,255,255,0.4);
}
70% {
transform: scale(1.1);
box-shadow: 0 0 0 10px rgba(255,255,255,0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255,255,255,0);
}
}
/* Enhanced social media buttons */
#shareModal .btn {
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
#shareModal .btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}
#shareModal .btn:hover::before {
left: 100%;
}
#shareModal .btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
#shareModal .btn-outline-info:hover {
background-color: #1da1f2;
border-color: #1da1f2;
}
#shareModal .btn-outline-danger:hover {
background-color: #e4405f;
border-color: #e4405f;
}
#shareModal .btn-outline-success:hover {
background-color: #25d366;
border-color: #25d366;
}
#shareModal .btn-outline-primary:hover {
background-color: #1877f2;
border-color: #1877f2;
}
/* Copy to clipboard animation */
.hashtag-tag.copying {
animation: copyPulse 0.6s ease;
}
@keyframes copyPulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); background-color: var(--success-color) !important; }
100% { transform: scale(1); }
}
/* Actions Section Styling */
.actions-section {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--border-radius-lg);
padding: 3rem 3rem 4rem 3rem;
box-shadow: var(--shadow-sm);
transition: var(--transition);
max-width: 900px;
margin: 0 auto;
}
.actions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 2rem;
}
.actions-section .section-title {
margin-top: 0.5rem;
margin-bottom: 2.5rem;
}
.actions-grid .btn {
padding: 1rem 1.5rem;
font-size: 1rem;
border-radius: var(--border-radius-lg);
transition: all 0.3s ease;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
min-height: 60px;
}
.actions-grid .btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
@media (max-width: 768px) {
.actions-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.actions-grid .btn {
padding: 0.75rem 1rem;
font-size: 0.9rem;
min-height: 50px;
}
}
/* Modal Backdrop Cleanup - Only hide share modal backdrops, not animated loaders */
.modal-backdrop.share-modal-backdrop {
display: none !important;
}
/* Share Card Styling */
.share-card-preview {
background: #f8f9fa;
border-radius: 12px;
padding: 20px;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed #dee2e6;
}
.generated-share-card {
width: 280px;
height: 400px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
position: relative;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
transform-origin: center;
}
.share-card-header {
padding: 12px 15px 8px;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.share-brand-container {
display: flex;
align-items: center;
gap: 8px;
}
.share-logo {
width: 32px;
height: 32px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.share-brand {
font-size: 9px;
font-weight: bold;
color: white;
}
.share-date {
font-size: 12px;
opacity: 0.8;
}
.share-card-content {
padding: 0 15px 12px;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
min-height: 0;
}
.share-emotion-name {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.share-pet-voice {
font-size: 8px;
font-style: italic;
margin-bottom: 25px;
opacity: 0.9;
line-height: 1.4;
}
.share-card-footer {
padding: 8px 15px;
background: rgba(0,0,0,0.2);
text-align: center;
flex-shrink: 0;
border-radius: 0 0 16px 16px;
}
.share-tagline {
font-size: 7px;
opacity: 0.9;
}
/* Theme Selector */
.theme-selector {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-bottom: 15px;
}
.theme-option {
height: 60px;
border-radius: 8px;
border: 2px solid transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
font-weight: bold;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
transition: all 0.3s ease;
}
.theme-option:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.theme-option.active {
border-color: #007bff;
transform: scale(1.05);
}
/* Hashtag Tags */
.hashtag-suggestions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hashtag-tag {
background: #e9ecef;
border: 1px solid #dee2e6;
border-radius: 15px;
padding: 4px 10px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
}
.hashtag-tag:hover {
background: #dee2e6;
}
.hashtag-tag.selected {
background: #007bff;
color: white;
border-color: #007bff;
}
/* Windows/Desktop Share Modal Optimizations */
@media (min-width: 993px) {
#shareModal .modal-dialog {
max-width: 1200px;
margin: 1.75rem auto;
}
#shareModal .modal-xl {
max-width: 1200px;
}
#shareModal .modal-content {
border-radius: 0.75rem;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
border: none;
}
#shareModal .modal-body {
padding: 2rem;
}
#shareModal .modal-header {
padding: 1.5rem 2rem 1rem;
border-bottom: 1px solid rgba(0,0,0,0.08);
}
#shareModal .modal-footer {
padding: 1rem 2rem 1.5rem;
border-top: 1px solid rgba(0,0,0,0.08);
flex-wrap: nowrap;
justify-content: space-between;
gap: 1rem;
}
#shareModal .modal-footer .btn {
min-width: 140px;
padding: 0.75rem 1.5rem;
font-size: 0.95rem;
border-radius: 0.5rem;
transition: all 0.3s ease;
}
#shareModal .modal-footer .btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
/* Enhanced desktop theme selector - 2x2 grid */
#shareModal .theme-selector,
.share-card-generator .theme-selector,
.theme-selector {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
grid-template-rows: repeat(2, 1fr) !important;
gap: 1rem !important;
margin-bottom: 2rem;
width: 100% !important;
flex-direction: unset !important;
flex-wrap: unset !important;
}
.theme-option {
height: 80px;
font-size: 0.9rem;
border-radius: 0.5rem;
transition: all 0.3s ease;
cursor: pointer;
}
.theme-option:hover {
transform: translateY(-4px);
box-shadow: 0 12px 25px rgba(0,0,0,0.2);
}
/* Desktop share card preview */
.share-card-preview {
min-height: 450px;
max-height: 450px;
padding: 1rem;
border-radius: 0.75rem;
border: 2px dashed rgba(0,0,0,0.1);
overflow: visible;
justify-content: center;
align-items: center;
}
.generated-share-card {
transform: scale(1.0);
margin: 0 auto;
transition: transform 0.4s ease;
transform-origin: center center;
}
.generated-share-card:hover {
transform: scale(1.02);
}
/* Desktop hashtag styling */
.hashtag-suggestions {
gap: 0.75rem;
margin-bottom: 2rem;
}
.hashtag-tag {
font-size: 0.9rem;
padding: 0.5rem 1rem;
border-radius: 1.5rem;
transition: all 0.3s ease;
cursor: pointer;
}
.hashtag-tag:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
}
/* Tablet Share Modal Optimizations */
@media (max-width: 992px) and (min-width: 769px) {
#shareModal .modal-dialog {
margin: 0.5rem;
max-width: calc(100vw - 1rem);
}
#shareModal .modal-xl {
max-width: calc(100vw - 1rem);
}
#shareModal .modal-content {
border-radius: 0.5rem;
max-height: calc(100vh - 1rem);
overflow-y: auto;
}
#shareModal .modal-body {
padding: 1.5rem;
overflow-x: hidden;
}
#shareModal .modal-header {
padding: 1rem 1.5rem;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
#shareModal .modal-footer {
padding: 1rem 1.5rem;
border-top: 1px solid rgba(0,0,0,0.1);
flex-wrap: wrap;
gap: 0.75rem;
}
#shareModal .theme-selector,
.share-card-generator .theme-selector,
.theme-selector {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
grid-template-rows: repeat(2, 1fr) !important;
gap: 0.75rem !important;
width: 100% !important;
flex-direction: unset !important;
flex-wrap: unset !important;
}
.theme-option {
height: 60px;
font-size: 0.8rem;
}
.share-card-preview {
min-height: 460px;
max-height: 460px;
padding: 0.5rem;
overflow: visible;
justify-content: center;
align-items: center;
}
.generated-share-card {
transform: scale(0.8);
margin: 0 auto;
transform-origin: center center;
}
}
/* Mobile Share Modal - Clean Simple Layout */
@media (max-width: 768px) {
#shareModal .modal-dialog {
margin: 0.125rem;
max-width: calc(100vw - 0.25rem);
height: calc(100vh - 0.25rem);
}
#shareModal .modal-content {
height: 100%;
display: flex;
flex-direction: column;
border-radius: 0.375rem;
border: none;
}
#shareModal .modal-body {
flex: 1;
overflow-y: auto;
padding: 1rem;
-webkit-overflow-scrolling: touch;
}
/* Simple mobile layout - no complex positioning */
#shareModal .row {
display: block;
margin: 0;
}
#shareModal .col-md-5,
#shareModal .col-md-7 {
width: 100%;
padding: 0;
margin-bottom: 2rem;
}
#shareModal h6 {
font-size: 0.9rem;
margin-bottom: 1rem;
font-weight: 600;
}
#shareModal .theme-selector {
margin-bottom: 1.5rem;
}
#shareModal .hashtag-suggestions {
margin-bottom: 1.5rem;
}
#shareModal .form-check {
margin-bottom: 1.5rem;
}
#shareModal .modal-header {
padding: 0.75rem;
border-bottom: 1px solid rgba(0,0,0,0.1);
flex-shrink: 0;
}
#shareModal .modal-footer {
padding: 0.75rem;
border-top: 1px solid rgba(0,0,0,0.1);
flex-shrink: 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
gap: 0.5rem;
}
/* Clean share card preview */
.share-card-preview {
min-height: 200px;
max-height: 200px;
margin-bottom: 2rem;
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
border-radius: 0.5rem;
border: 2px dashed #dee2e6;
}
.generated-share-card {
transform: scale(0.45);
margin: 0 auto;
width: 250px;
height: 380px;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
transform-origin: center center;
}
/* Clean 2x2 theme grid */
#shareModal .theme-selector {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0.5rem;
}
.theme-option {
height: 45px;
font-size: 0.75rem;
border-radius: 0.375rem;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.theme-option.active {
border-color: #007bff;
transform: scale(1.02);
}
/* Clean footer buttons */
#shareModal .modal-footer .btn {
width: 100%;
padding: 0.75rem 0.5rem;
font-size: 0.85rem;
border-radius: 0.375rem;
min-height: 45px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
text-align: center;
line-height: 1.2;
}
/* Simple hashtag layout */
.hashtag-suggestions {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.hashtag-tag {
font-size: 0.7rem;
padding: 0.3rem 0.6rem;
border-radius: 1rem;
cursor: pointer;
transition: all 0.2s ease;
background: rgba(0,123,255,0.1);
color: #007bff;
border: 1px solid rgba(0,123,255,0.2);
}
.hashtag-tag.selected {
background: #007bff;
color: white;
border-color: #007bff;
}
/* Simple form elements */
#shareModal .form-control,
#shareModal .form-select {
padding: 0.5rem;
font-size: 0.9rem;
border-radius: 0.375rem;
border: 1px solid #dee2e6;
}
#shareModal .form-check-input {
width: 1.25rem;
height: 1.25rem;
}
#shareModal .form-check-label {
font-size: 0.9rem;
margin-left: 0.5rem;
}
/* Clean headings */
#shareModal h5 {
font-size: 1.05rem;
margin-bottom: 0.75rem;
}
}
/* Ultra-Mobile Share Modal Optimizations (iPhone SE, small phones) */
@media (max-width: 576px) {
#shareModal .modal-dialog {
margin: 0;
max-width: 100vw;
height: 100vh;
border-radius: 0;
}
#shareModal .modal-content {
height: 100vh;
border-radius: 0;
border: none;
}
#shareModal .modal-body {
padding: 0.5rem;
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
min-height: 0;
position: relative;
z-index: 0;
}
/* Force visibility for ultra-mobile too */
#shareModal .row,
#shareModal .col-md-7,
#shareModal .col-md-5,
#shareModal h6,
#shareModal .share-card-preview,
#shareModal .theme-selector,
#shareModal .hashtag-suggestions,
#shareModal .form-check,
#shareModal .btn:not(.btn-close) {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
}
/* Ensure proper footer button positioning */
#shareModal .modal-footer .btn {
position: static !important;
float: none !important;
clear: both !important;
}
#shareModal .modal-header {
padding: 0.75rem 0.5rem 0.5rem;
border-bottom: 1px solid rgba(0,0,0,0.1);
position: sticky;
top: 0;
background: white;
z-index: 10;
}
#shareModal .modal-footer {
border-top: 1px solid rgba(0,0,0,0.1);
position: relative;
background: white;
z-index: 1;
margin-top: auto;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
gap: 0.5rem;
padding: 0.75rem;
}
/* Ultra-compact share card */
.generated-share-card {
transform: scale(0.5);
margin: -40px auto -30px;
width: 350px;
height: 500px;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.share-card-preview {
min-height: 200px;
padding: 0.5rem;
margin-bottom: 0.75rem;
display: flex !important;
align-items: center;
justify-content: center;
visibility: visible !important;
opacity: 1 !important;
}
/* Ensure columns are visible on ultra-mobile */
#shareModal .col-md-7,
#shareModal .col-md-5 {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Compact theme selector - 2x2 grid */
#shareModal .theme-selector,
.share-card-generator .theme-selector,
.theme-selector {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
grid-template-rows: repeat(2, 1fr) !important;
gap: 0.25rem !important;
margin-bottom: 0.75rem;
width: 100% !important;
flex-direction: unset !important;
flex-wrap: unset !important;
}
.theme-option {
height: 35px;
font-size: 0.65rem;
border-radius: 0.25rem;
}
/* Ultra-compact footer buttons */
#shareModal .modal-footer .btn {
padding: 0.5rem;
font-size: 0.8rem;
min-height: 44px;
border-radius: 0.375rem;
}
/* Compact hashtags */
.hashtag-tag {
font-size: 0.7rem;
padding: 0.375rem 0.5rem;
border-radius: 1rem;
}
/* Ultra-compact form elements */
#shareModal .form-control,
#shareModal .form-select {
padding: 0.5rem;
font-size: 0.875rem;
border-radius: 0.375rem;
border-width: 1px;
}
#shareModal .form-check-input {
width: 1rem;
height: 1rem;
}
#shareModal .form-check-label {
font-size: 0.8rem;
}
/* Ultra-compact headings */
#shareModal h5 {
font-size: 1rem;
margin-bottom: 0.75rem;
}
#shareModal h6 {
font-size: 0.85rem;
margin-bottom: 0.5rem;
}
/* Safe area handling for iPhone notch */
#shareModal .modal-header {
padding-top: max(0.75rem, env(safe-area-inset-top));
}
#shareModal .modal-footer {
padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}
/* Optimize touch targets */
#shareModal button,
#shareModal .hashtag-tag,
#shareModal .theme-option {
min-height: 44px;
min-width: 44px;
}
}
/* Mobile Optimizations */
@media (max-width: 768px) {
.container-fluid {
padding: 1rem;
}
.upload-container {
padding: 2rem 1rem;
}
.brand-title {
font-size: 1.75rem;
}
.upload-area, .recording-area {
padding: 2rem 1rem;
margin: 1rem 0;
}
.upload-title, .recording-title {
font-size: 1.05rem;
}
.upload-description, .recording-description {
font-size: 1rem;
}
.btn-lg {
padding: 0.75rem 1.5rem;
font-size: 1rem;
}
.recording-controls {
flex-direction: column;
align-items: center;
}
.recording-controls .btn {
width: 200px;
margin: 0.5rem 0;
}
.nav-controls {
flex-direction: column;
gap: 1rem;
}
.nav-controls .btn {
width: 200px;
}
.upload-options .btn-group {
flex-direction: column;
}
.upload-options .btn {
border-radius: var(--border-radius) !important;
margin-bottom: 0.5rem;
}
.comparison-item {
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
.comparison-date {
min-width: auto;
}
}
@media (max-width: 480px) {
.upload-container {
padding: 1rem 0.5rem;
}
.brand-title {
font-size: 1.4rem;
}
.upload-area, .recording-area {
padding: 1.5rem 1rem;
}
.recording-visualizer {
padding: 0.5rem;
}
#recordingCanvas {
width: 250px;
height: 80px;
}
}
/* Button Overrides */
.btn-primary {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
border: none;
border-radius: var(--border-radius);
font-weight: 600;
transition: var(--transition);
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-success {
background: linear-gradient(135deg, var(--success-color), #2ECC71);
border: none;
border-radius: var(--border-radius);
font-weight: 600;
}
.btn-outline-secondary {
border-color: var(--border-medium);
color: var(--text-secondary);
border-radius: var(--border-radius);
font-weight: 600;
}
.btn-outline-secondary:hover {
background: var(--bg-secondary);
border-color: var(--primary-color);
color: var(--primary-color);
}
/* Progress Bar */
.progress {
height: 8px;
background: var(--bg-secondary);
border-radius: 4px;
overflow: hidden;
}
.progress-bar {
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}
/* Responsive Design */
@media (max-width: 768px) {
.upload-container, .results-container {
padding: 1.5rem 1rem;
}
.upload-form-container,
.spectral-section,
.thread-echo-section,
.pet-voice-section,
.about-section,
.understanding-section {
padding: 1.5rem;
}
.brand-title {
font-size: 1.2rem;
}
.upload-area {
padding: 2rem 1rem;
min-height: 150px;
}
.spectrum-header {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
.spectrum-label {
font-size: 0.8rem;
}
.thread-echo-text,
.pet-voice-text {
font-size: 1rem;
line-height: 1.5;
}
/* 2x2 Grid mobile optimization */
.spectral-colors-grid .row,
.understanding-section .row {
margin-bottom: 1rem;
}
.spectral-color-card,
.understanding-card {
padding: 1rem;
margin-bottom: 1rem;
}
.color-swatch {
width: 40px;
height: 40px;
margin: 0 auto 0.75rem;
}
.spectral-color-card h5,
.understanding-card h5 {
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.understanding-card p {
font-size: 0.85rem;
line-height: 1.4;
}
.color-value {
font-size: 1rem;
margin-bottom: 0.5rem;
}
/* Primary emotion display mobile */
.primary-emotion-card {
padding: 1.5rem 1rem;
}
.primary-color-circle {
width: 80px;
height: 80px;
margin: 0 auto 1rem;
}
.emotion-name {
font-size: 1.2rem;
text-align: center;
margin-bottom: 0.75rem;
}
.emotion-description {
font-size: 0.9rem;
text-align: center;
line-height: 1.4;
}
}
/* History Styles */
.history-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.history-card .card {
transition: var(--transition);
border: 1px solid var(--border-light);
}
.history-card .card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.analysis-preview .progress {
background-color: var(--bg-secondary);
}
.history-card .card-title {
font-size: 1rem;
margin-bottom: 0.5rem;
}
.history-card .card-text {
line-height: 1.4;
}
/* Pet Emotion Color Palette Styles */
.emotion-palette-section {
background: var(--bg-white);
border-radius: var(--border-radius-lg);
padding: 2rem;
box-shadow: var(--shadow-md);
margin-bottom: 2rem;
}
.primary-emotion-card {
background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-secondary) 100%);
border-radius: var(--border-radius);
padding: 2rem;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
}
.primary-color-circle {
width: 120px;
height: 120px;
border-radius: 50%;
position: relative;
box-shadow: var(--shadow-lg);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.color-pulse {
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-radius: 50%;
background: inherit;
opacity: 0.3;
animation: colorPulse 2s ease-in-out infinite;
}
@keyframes colorPulse {
0%, 100% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(1.1); opacity: 0.1; }
}
.emotion-name {
font-size: 1.4rem; /* Reduced by 30% from 2rem */
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.75rem;
}
.emotion-description {
font-size: 0.7875rem; /* Reduced by 30% from 1.125rem */
color: var(--text-secondary);
margin-bottom: 1rem;
line-height: 1.6;
}
.emotion-traits {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.trait-tag {
background: var(--primary-color);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.6125rem; /* Reduced by 30% from 0.875rem */
font-weight: 500;
}
.spectral-colors-grid {
margin: 2rem 0;
}
.spectral-color-card {
background: var(--bg-white);
border-radius: var(--border-radius);
padding: 1.5rem;
text-align: center;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
transition: var(--transition);
}
.spectral-color-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.color-swatch {
width: 60px;
height: 60px;
border-radius: 50%;
margin: 0 auto 1rem;
box-shadow: var(--shadow-sm);
border: 3px solid var(--bg-white);
}
.spectral-color-card h5 {
font-size: 0.7875rem; /* Reduced by 30% from 1.125rem */
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.color-value {
font-size: 1.05rem; /* Reduced by 30% from 1.5rem */
font-weight: 700;
color: var(--primary-color);
margin-bottom: 0.5rem;
}
.color-meaning {
font-size: 0.875rem;
color: var(--text-secondary);
margin-bottom: 0;
font-family: 'Courier New', monospace;
}
.palette-description-card {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
border-radius: var(--border-radius);
padding: 2rem;
margin-top: 2rem;
}
.palette-description-text {
color: white;
font-size: 1.125rem;
line-height: 1.7;
margin-bottom: 0;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* Dark theme adjustments for emotion palette */
[data-theme="dark"] .emotion-palette-section {
background: var(--bg-white);
border: 1px solid var(--border-medium);
}
[data-theme="dark"] .primary-emotion-card {
background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-secondary) 100%);
border: 1px solid var(--border-medium);
}
[data-theme="dark"] .spectral-color-card {
background: var(--bg-white);
border: 1px solid var(--border-medium);
}
[data-theme="dark"] .color-swatch {
border: 3px solid var(--bg-secondary);
}
/* Spectral Colors Grid Layout - 2x2 arrangement */
.spectral-colors-grid {
margin-bottom: 2rem;
}
.spectral-colors-grid .row {
margin-bottom: 1rem;
}
.spectral-color-card {
background: var(--bg-white);
border-radius: var(--border-radius);
padding: 1.5rem;
text-align: center;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
height: 100%;
transition: var(--transition);
}
.spectral-color-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.spectral-color-card .color-swatch {
width: 60px;
height: 60px;
border-radius: 50%;
margin: 0 auto 1rem auto;
border: 3px solid var(--bg-light);
box-shadow: var(--shadow-sm);
}
.spectral-color-card h5 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--text-primary);
}
/* Spectral Tone Values - 2x4 Grid Layout */
.spectral-section .spectrum-card {
background: var(--bg-white);
border-radius: var(--border-radius);
padding: 1rem;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
height: 100%;
transition: var(--transition);
}
.spectral-section .spectrum-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Spectral Accordion Styling */
.spectral-section .accordion {
border-radius: var(--border-radius-xl);
overflow: hidden;
}
.spectral-section .accordion-item {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--border-radius-xl);
box-shadow: var(--shadow-lg);
}
.spectral-section .accordion-button {
background: var(--bg-white);
border: none;
font-size: 0.735rem;
font-weight: 600;
color: var(--text-primary);
padding: 1.5rem 2rem;
border-radius: var(--border-radius-xl);
transition: var(--transition);
}
.spectral-section .accordion-button:not(.collapsed) {
background: var(--bg-white);
color: var(--primary-color);
box-shadow: none;
}
.spectral-section .accordion-button:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.25rem rgba(107, 115, 255, 0.25);
}
.spectral-section .accordion-button::after {
background-image: url("data:image/svg+xml,");
width: 1.25rem;
height: 1.25rem;
}
.spectral-section .accordion-body {
padding: 2rem;
background: var(--bg-white);
}
/* Responsive adjustments for emotion palette */
@media (max-width: 768px) {
.primary-color-circle {
width: 100px;
height: 100px;
}
.emotion-name {
font-size: 1.5rem;
}
.emotion-description {
font-size: 1rem;
}
.spectral-color-card {
padding: 1.2rem;
margin-bottom: 1rem;
}
.spectral-color-card .color-swatch {
width: 50px;
height: 50px;
}
.spectral-color-card h5 {
font-size: 1rem;
}
.palette-description-card {
padding: 1.5rem;
}
}
/* Responsive for Spectral Tone Values (2x4 Grid) */
@media (max-width: 768px) {
.spectral-section .spectrum-card {
padding: 0.8rem;
margin-bottom: 1rem;
}
.spectral-section .spectrum-header {
padding: 0.5rem 0;
}
.spectral-section .spectrum-label {
font-size: 0.8rem;
}
.spectral-section .spectrum-value {
font-size: 0.9rem;
}
}
@media (max-width: 576px) {
/* On mobile, stack items in 2x2 grid instead of 1x4 for better readability */
.spectral-section .col-6.col-md-3 {
flex: 0 0 50%;
max-width: 50%;
}
.spectral-section .spectrum-card {
padding: 0.6rem;
margin-bottom: 0.8rem;
}
.spectral-section .spectrum-label {
font-size: 0.7rem;
}
.spectral-section .spectrum-value {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.spectral-colors-grid .row {
margin-bottom: 0.5rem;
}
.spectral-color-card {
padding: 1rem;
margin-bottom: 0.8rem;
}
.spectral-color-card .color-swatch {
width: 45px;
height: 45px;
margin-bottom: 0.8rem;
}
.spectral-color-card h5 {
font-size: 0.9rem;
margin-bottom: 0.4rem;
}
.color-value {
font-size: 0.9rem;
}
.color-meaning {
font-size: 0.75rem;
}
.spectral-section .spectrum-card {
padding: 0.5rem;
margin-bottom: 0.6rem;
}
.spectral-section .spectrum-label {
font-size: 0.65rem;
}
.spectral-section .spectrum-value {
font-size: 0.75rem;
}
}
/* Shareable Emotion Analysis Cards */
.share-card-container {
display: flex;
justify-content: center;
padding: 1rem;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border-radius: var(--border-radius);
}
.share-card {
width: 400px;
background: var(--bg-white);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-xl);
overflow: hidden;
position: relative;
}
.share-card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: white;
}
.share-logo {
display: flex;
align-items: center;
gap: 0.5rem;
}
.share-logo-img {
width: 32px;
height: 32px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.share-brand {
font-weight: 700;
font-size: 0.5625rem;
}
.share-date {
font-size: 0.875rem;
opacity: 0.9;
}
.share-card-content {
padding: 2rem 1.5rem;
}
.share-emotion-display {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 2rem;
}
.share-primary-color {
width: 80px;
height: 80px;
border-radius: 50%;
position: relative;
box-shadow: var(--shadow-lg);
flex-shrink: 0;
}
.share-emotion-info {
flex: 1;
}
.share-emotion-name {
font-size: 0.75rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.5rem;
line-height: 1.2;
}
.share-pet-voice {
font-size: 0.5rem;
color: var(--text-secondary);
font-style: italic;
margin-bottom: 0;
line-height: 1.4;
}
.share-spectral-mini {
display: flex;
justify-content: space-between;
gap: 0.75rem;
}
.share-card-footer {
background: var(--bg-secondary);
padding: 1rem 1.5rem;
text-align: center;
}
.share-tagline {
font-size: 0.875rem;
color: var(--text-secondary);
font-weight: 500;
}
/* Share Options */
.share-options {
background: var(--bg-secondary);
border-radius: var(--border-radius);
padding: 1.5rem;
}
.share-options h6 {
color: var(--text-primary);
font-weight: 600;
}
.share-options .btn {
font-size: 0.875rem;
padding: 0.5rem 1rem;
transition: var(--transition);
}
.share-options .btn:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* Dark theme adjustments for share cards */
[data-theme="dark"] .share-card {
background: var(--bg-white);
border: 1px solid var(--border-medium);
}
[data-theme="dark"] .share-card-footer {
background: var(--bg-secondary);
}
[data-theme="dark"] .share-options {
background: var(--bg-secondary);
border: 1px solid var(--border-medium);
}
/* Dark theme adjustments for share modal */
[data-theme="dark"] #shareModal .modal-content {
background-color: var(--bg-white);
border: 1px solid var(--border-medium);
color: var(--text-primary);
}
[data-theme="dark"] #shareModal .modal-header {
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border-medium);
color: var(--text-primary);
}
[data-theme="dark"] #shareModal .modal-title {
color: var(--text-primary);
}
[data-theme="dark"] #shareModal .modal-body {
background-color: var(--bg-white);
color: var(--text-primary);
}
[data-theme="dark"] #shareModal .form-label {
color: var(--text-primary);
font-weight: 600;
}
[data-theme="dark"] #shareModal h6 {
color: var(--text-primary);
}
[data-theme="dark"] #shareModal .text-muted {
color: var(--text-secondary) !important;
}
[data-theme="dark"] .share-card-preview {
background: var(--bg-secondary);
border: 2px dashed var(--border-medium);
}
[data-theme="dark"] .preview-placeholder {
color: var(--text-secondary);
}
[data-theme="dark"] .preview-placeholder .text-muted {
color: var(--text-secondary) !important;
}
[data-theme="dark"] .hashtag-tag {
background: var(--bg-secondary);
border: 1px solid var(--border-medium);
color: var(--text-primary);
}
[data-theme="dark"] .hashtag-tag:hover {
background: var(--border-medium);
}
[data-theme="dark"] .hashtag-tag.selected {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
/* Auto-Analysis Overlay Styles */
.analysis-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.analysis-overlay.show {
opacity: 1;
visibility: visible;
}
.analysis-dialog {
background: var(--bg-white);
border-radius: 16px;
padding: 2rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
max-width: 480px;
width: 90%;
position: relative;
transform: translateY(-20px) scale(0.95);
transition: all 0.3s ease;
}
.analysis-overlay.show .analysis-dialog {
transform: translateY(0) scale(1);
}
.analysis-dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-light);
}
.analysis-dialog-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 0.5rem;
}
.analysis-close-btn {
background: none;
border: none;
font-size: 1.5rem;
color: var(--text-secondary);
cursor: pointer;
padding: 0.25rem;
border-radius: 4px;
transition: all 0.2s ease;
}
.analysis-close-btn:hover {
background: var(--bg-secondary);
color: var(--text-primary);
}
.file-preview-section {
background: var(--bg-secondary);
border-radius: 12px;
padding: 1rem;
margin-bottom: 1.5rem;
border: 2px dashed var(--border-medium);
}
.file-preview-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.file-icon {
width: 32px;
height: 32px;
background: var(--primary-color);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
}
.file-details h4 {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.file-size {
font-size: 0.875rem;
color: var(--text-secondary);
margin: 0;
}
.analysis-progress-section {
text-align: center;
}
.analysis-status-text {
font-size: 1.125rem;
font-weight: 500;
color: var(--primary-color);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.analysis-spinner {
width: 24px;
height: 24px;
border: 3px solid var(--border-light);
border-top: 3px solid var(--primary-color);
border-radius: 50%;
animation: analysisSpinnerRotate 1s linear infinite;
}
@keyframes analysisSpinnerRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.analysis-progress-bar {
width: 100%;
height: 8px;
background: var(--bg-secondary);
border-radius: 4px;
overflow: hidden;
margin-bottom: 1rem;
}
.analysis-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 4px;
width: 0%;
transition: width 0.3s ease;
position: relative;
}
.analysis-progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%
);
animation: analysisProgressShimmer 2s infinite;
}
@keyframes analysisProgressShimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.analysis-time-estimate {
font-size: 0.875rem;
color: var(--text-secondary);
margin: 0;
}
.analysis-steps {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border-light);
}
.analysis-step {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0;
transition: all 0.3s ease;
}
.analysis-step-icon {
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
border: 2px solid var(--border-medium);
color: var(--text-secondary);
transition: all 0.3s ease;
}
.analysis-step.active .analysis-step-icon {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.analysis-step.completed .analysis-step-icon {
background: var(--success-color);
border-color: var(--success-color);
color: white;
}
.analysis-step-text {
font-size: 0.875rem;
color: var(--text-secondary);
transition: color 0.3s ease;
}
.analysis-step.active .analysis-step-text {
color: var(--text-primary);
font-weight: 500;
}
.analysis-step.completed .analysis-step-text {
color: var(--text-primary);
}
/* Dark theme adjustments for analysis overlay */
[data-theme="dark"] .analysis-dialog {
background: var(--bg-white);
border: 1px solid var(--border-medium);
}
[data-theme="dark"] .file-preview-section {
background: var(--bg-secondary);
border-color: var(--border-medium);
}
[data-theme="dark"] .analysis-progress-bar {
background: var(--bg-secondary);
}
[data-theme="dark"] .analysis-spinner {
border-color: var(--border-medium);
border-top-color: var(--primary-color);
}
/* Mobile responsiveness for analysis overlay */
@media (max-width: 768px) {
.analysis-dialog {
margin: 1rem;
padding: 1.5rem;
max-width: calc(100% - 2rem);
}
.analysis-dialog-title {
font-size: 1.125rem;
}
.file-preview-header {
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
.analysis-status-text {
font-size: 1rem;
}
}
/* Button spinner styles for analyze button */
.btn-spinner {
width: 16px;
height: 16px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: buttonSpinnerRotate 1s linear infinite;
margin-right: 0.5rem;
}
@keyframes buttonSpinnerRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Dark theme toast notifications */
[data-theme="dark"] .toast {
background-color: var(--bg-secondary);
border: 1px solid var(--border-medium);
color: var(--text-primary);
}
[data-theme="dark"] .toast-header {
background-color: var(--bg-white);
border-bottom: 1px solid var(--border-light);
color: var(--text-primary);
}
[data-theme="dark"] .toast-body {
color: var(--text-primary);
}
[data-theme="dark"] .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
/* Dark theme alert notifications */
[data-theme="dark"] .alert {
background-color: var(--bg-secondary);
border: 1px solid var(--border-medium);
color: var(--text-primary);
}
[data-theme="dark"] .alert-info {
background-color: rgba(139, 92, 246, 0.1);
border-color: var(--primary-color);
color: var(--text-primary);
}
[data-theme="dark"] .alert-success {
background-color: rgba(16, 185, 129, 0.1);
border-color: var(--success-color);
color: var(--text-primary);
}
[data-theme="dark"] .alert-warning {
background-color: rgba(245, 158, 11, 0.1);
border-color: var(--warning-color);
color: var(--text-primary);
}
[data-theme="dark"] .alert-danger {
background-color: rgba(239, 68, 68, 0.1);
border-color: var(--danger-color);
color: var(--text-primary);
}
/* Theme toggle button icon alignment */
#themeToggle {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
#themeIcon {
display: block;
margin: 0 auto;
}
/* Responsive adjustments for share cards */
@media (max-width: 768px) {
.share-card {
width: 100%;
max-width: 350px;
}
.share-emotion-display {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.share-primary-color {
width: 70px;
height: 70px;
}
.share-emotion-name {
font-size: 0.625rem;
}
.share-spectral-mini {
gap: 0.5rem;
}
}
/* Animation for card generation */
.share-card-generating {
opacity: 0.7;
transform: scale(0.98);
transition: all 0.3s ease;
}
.share-card-ready {
opacity: 1;
transform: scale(1);
transition: all 0.3s ease;
}
/* Enhanced Mobile Responsiveness */
@media (max-width: 576px) {
/* Typography adjustments */
.brand-title-inline {
font-size: 1.02rem; /* Doubled from 0.51rem */
}
.brand-subtitle {
font-size: 1rem;
}
.section-title {
font-size: 1.5rem;
}
/* Container padding */
.upload-container,
.results-container {
padding: 1.5rem 1rem;
}
/* Navigation controls */
.nav-controls {
flex-direction: column;
gap: 0.75rem;
}
.nav-controls .btn {
width: 100%;
max-width: 280px;
}
/* Upload area */
.upload-area {
padding: 2rem 1rem;
}
.upload-area h3 {
font-size: 1.25rem;
}
/* Actions section */
.actions-section .btn {
width: 100%;
margin: 0.25rem 0;
}
/* Spectral analysis */
.spectrum-item {
margin-bottom: 1.5rem;
}
.spectrum-progress {
height: 8px;
}
/* Thread echo and pet voice */
.thread-echo-text,
.pet-voice-text {
font-size: 1rem;
line-height: 1.6;
}
/* Emotion palette mobile optimization */
.primary-emotion-card {
padding: 1.5rem 1rem;
}
.share-emotion-display {
flex-direction: column;
text-align: center;
align-items: center;
}
/* Waveform canvas */
#waveformCanvas {
width: 100%;
max-width: 320px;
height: 150px;
}
/* History grid */
.history-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
/* Upload options */
.upload-options .btn-group {
flex-direction: column;
}
.upload-options .btn {
border-radius: var(--border-radius) !important;
margin-bottom: 0.5rem;
}
}
/* Small mobile devices */
@media (max-width: 480px) {
.upload-container, .results-container {
padding: 1rem 0.75rem;
}
/* Single-row header layout for iPhone */
.brand-header {
gap: 0.5rem;
align-items: center !important;
}
.logo-inline {
width: 60px !important; /* Increased by 50% from 40px */
height: 60px !important; /* Increased by 50% from 40px */
flex-shrink: 0;
}
.brand-text {
margin: 0;
min-width: 0;
flex: 1;
}
.session-info {
flex-shrink: 0;
margin: 0;
font-size: 0.7rem;
}
.session-info i {
font-size: 0.8rem;
}
.upload-form-container,
.spectral-section,
.thread-echo-section,
.pet-voice-section,
.understanding-section {
padding: 1rem;
margin-bottom: 1rem;
}
.brand-title {
font-size: 1rem;
}
.brand-title-inline {
font-size: 1.26rem; /* Doubled from 0.63rem */
}
.brand-subtitle {
font-size: 0.585rem; /* Reduced by 10% from 0.65rem */
}
.section-title {
font-size: 0.65rem;
margin-bottom: 1rem;
}
/* Mobile grid adjustments */
.spectral-colors-grid .col-md-6,
.understanding-section .col-md-6 {
margin-bottom: 0.75rem;
}
.spectral-color-card,
.understanding-card {
padding: 0.75rem;
text-align: center;
}
.color-swatch {
width: 35px;
height: 35px;
margin: 0 auto 0.5rem;
}
.spectral-color-card h5,
.understanding-card h5 {
font-size: 0.8rem;
margin-bottom: 0.4rem;
}
.understanding-card p {
font-size: 0.75rem;
line-height: 1.3;
}
.color-value {
font-size: 0.9rem;
}
.color-meaning {
font-size: 0.7rem;
}
/* Primary emotion mobile */
.primary-color-circle {
width: 60px;
height: 60px;
margin: 0 auto 0.75rem;
}
.emotion-name {
font-size: 1rem;
margin-bottom: 0.5rem;
}
.emotion-description {
font-size: 0.8rem;
line-height: 1.3;
}
/* Actions section mobile */
.actions-section {
margin-top: 2rem;
padding: 2rem 1.5rem 3rem 1.5rem;
}
.actions-section .section-title {
margin-top: 0.5rem;
margin-bottom: 2rem;
}
.actions-section .btn {
width: 100%;
margin: 0.3rem 0;
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
/* Thread echo and pet voice mobile */
.thread-echo-card,
.pet-voice-card {
padding: 1rem;
}
.thread-echo-text,
.pet-voice-text {
font-size: 0.9rem;
line-height: 1.4;
}
/* Waveform mobile */
.waveform-container {
padding: 0.75rem;
}
#waveformCanvas {
width: 100%;
max-width: 280px;
height: 120px;
}
.waveform-controls {
flex-direction: column;
gap: 0.5rem;
margin-top: 0.75rem;
}
.waveform-controls .btn {
width: 100%;
max-width: 150px;
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
}
/* Extra small devices and landscape phones */
@media (max-width: 360px) {
.upload-container, .results-container {
padding: 0.75rem 0.5rem;
}
.spectral-color-card,
.understanding-card {
padding: 0.5rem;
margin-bottom: 0.75rem;
}
.spectral-color-card h5,
.understanding-card h5 {
font-size: 0.75rem;
}
.understanding-card p {
font-size: 0.7rem;
}
.color-swatch {
width: 30px;
height: 30px;
}
.primary-color-circle {
width: 50px;
height: 50px;
}
.emotion-name {
font-size: 0.9rem;
}
.emotion-description {
font-size: 0.75rem;
}
}
/* CSS Grid fallbacks for older browsers */
@supports not (display: grid) {
.spectral-colors-grid .row,
.understanding-section .row {
display: flex;
flex-wrap: wrap;
}
.spectral-colors-grid .col-md-6,
.understanding-section .col-md-6 {
flex: 0 0 50%;
max-width: 50%;
}
@media (max-width: 768px) {
.spectral-colors-grid .col-md-6,
.understanding-section .col-md-6 {
flex: 0 0 100%;
max-width: 100%;
}
}
}
/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
.btn {
min-height: 44px;
padding: 0.75rem 1.5rem;
}
.mascot-control-btn {
min-height: 44px;
min-width: 44px;
line-height: 1;
padding: 0;
}
.pet-mascot {
min-height: 44px;
min-width: 44px;
}
.spectral-color-card,
.understanding-card {
padding: 1rem;
min-height: 44px;
}
/* Improved touch targets */
.upload-area {
min-height: 120px;
padding: 1.5rem;
}
/* Remove hover effects on touch devices */
.btn:hover,
.card:hover,
.spectral-color-card:hover,
.understanding-card:hover,
.pet-mascot:hover {
transform: none;
}
}
/* Landscape orientation adjustments */
@media (max-height: 500px) and (orientation: landscape) {
.pet-mascot {
width: 50px !important;
height: 50px !important;
bottom: 10px !important;
right: 10px !important;
}
.mascot-controls {
top: 50%;
right: 8px;
transform: translateY(-50%);
gap: 4px;
}
.mascot-control-btn {
width: 24px;
height: 24px;
font-size: 8px;
line-height: 1;
padding: 0;
}
.mascot-speech-bubble {
max-width: 100px;
font-size: 8px;
padding: 3px 5px;
bottom: 55px;
}
.mood-indicator {
font-size: 12px;
top: -8px;
}
}
@media (max-width: 768px) {
/* Logo and brand adjustments */
.logo-section {
width: 35%; /* Slightly reduced for tablet readability */
padding: 0; /* No padding on tablet */
}
.logo-inline {
width: 560px; /* Doubled from 280px for tablet */
height: 560px;
}
.brand-title-inline {
font-size: 1.8rem; /* Reduced slightly for tablet */
transform: translateX(0px) !important; /* Remove translateX for tablet */
}
.brand-subtitle {
font-size: 0.9rem; /* Keep original tablet size */
max-width: 240px;
text-align: left; /* Left align on tablet */
transform: translateX(0px) !important; /* Remove translateX for tablet */
}
.brand-text-section {
width: 45%; /* More space for text on tablet */
padding: 0 0 0 0.5rem; /* Minimal left padding for tablet */
}
.session-info-section {
width: 20%; /* Same proportion for session */
padding: 0; /* No padding on tablet */
justify-content: flex-end !important; /* Keep session ID on right for tablet */
}
/* Button sizing */
.btn-lg {
padding: 0.75rem 1.5rem;
font-size: 1rem;
}
/* Upload area improvements */
.upload-area {
min-height: 200px;
padding: 2rem 1.5rem;
}
/* File preview */
.file-preview {
max-width: 100%;
padding: 1rem;
}
/* Recording controls */
.recording-controls {
flex-direction: column;
gap: 0.75rem;
}
.recording-controls .btn {
width: 100%;
max-width: 200px;
}
/* Progress indicator */
.progress-container {
margin: 1rem 0;
}
/* Spectral section mobile */
.spectral-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
/* Understanding section */
.understanding-section .row > div {
margin-bottom: 1rem;
}
/* Features grid */
.features-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
text-align: center;
}
/* Comparison mode */
.comparison-grid {
grid-template-columns: 1fr;
}
/* Modal adjustments */
.modal-dialog {
margin: 1rem;
}
.modal-body {
padding: 1rem;
}
}
@media (max-width: 992px) {
/* Tablet specific adjustments */
.upload-container,
.results-container {
padding: 2rem 1.5rem;
}
/* Emotion palette tablet view */
.spectral-colors-grid .row > div {
margin-bottom: 1rem;
}
/* Share card modal */
.share-card {
max-width: 100%;
}
/* History comparison */
.comparison-results .row > div {
margin-bottom: 1rem;
}
}
/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
/* Larger touch targets */
.btn {
min-height: 44px;
padding: 0.75rem 1.5rem;
}
.btn-sm {
min-height: 38px;
padding: 0.5rem 1rem;
}
/* File input area */
.upload-area {
min-height: 180px;
}
/* Remove hover effects on touch devices */
.btn:hover,
.card:hover,
.history-card:hover {
transform: none;
box-shadow: var(--shadow-md);
}
/* Improved tap targets for navigation */
.nav-controls .btn {
margin: 0.25rem;
}
/* Better touch scrolling */
.modal-body {
-webkit-overflow-scrolling: touch;
}
}
/* Landscape phone orientation */
@media screen and (max-height: 500px) and (orientation: landscape) {
.upload-container,
.results-container {
padding: 1rem;
}
.brand-header {
margin-bottom: 1rem;
}
.nav-controls {
margin-bottom: 1rem;
}
.upload-area {
min-height: 120px;
padding: 1rem;
}
}
/* Print Styles */
@media print {
body {
background: white;
}
.actions-section {
display: none;
}
.upload-container,
.results-container {
max-width: none;
padding: 1rem;
}
.spectral-section,
.thread-echo-section,
.pet-voice-section,
.emotion-palette-section {
box-shadow: none;
border: 1px solid var(--border-light);
}
.color-pulse,
.share-color-pulse {
display: none;
}
.share-card {
box-shadow: none;
border: 1px solid var(--border-light);
}
}
/* Pet Mascot Styling */
.pet-mascot {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.pet-mascot:hover {
transform: scale(1.05);
}
.pet-mascot:active {
transform: scale(0.95);
}
.mascot-speech-bubble {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.4;
word-wrap: break-word;
}
.mood-indicator {
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
/* Mascot animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
transform: translate3d(0,0,0);
}
40%, 43% {
transform: translate3d(0, -15px, 0);
}
70% {
transform: translate3d(0, -7px, 0);
}
90% {
transform: translate3d(0, -2px, 0);
}
}
@keyframes wiggle {
0%, 7% {
transform: rotateZ(0);
}
15% {
transform: rotateZ(-15deg);
}
20% {
transform: rotateZ(10deg);
}
25% {
transform: rotateZ(-10deg);
}
30% {
transform: rotateZ(6deg);
}
35% {
transform: rotateZ(-4deg);
}
40%, 100% {
transform: rotateZ(0);
}
}
.mascot-svg {
transition: all 0.3s ease;
}
/* Interaction control buttons */
.mascot-controls {
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 12px;
z-index: 999;
align-items: center;
}
/* Enhanced speech bubble animations */
@keyframes typingDot {
0%, 60%, 100% {
transform: translateY(0);
opacity: 0.4;
}
30% {
transform: translateY(-10px);
opacity: 1;
}
}
@keyframes speechBubbleBounce {
0% {
transform: translateY(10px) scale(0.8);
opacity: 0;
}
50% {
transform: translateY(-5px) scale(1.05);
opacity: 0.8;
}
100% {
transform: translateY(0) scale(1);
opacity: 1;
}
}
@keyframes mascotExcited {
0%, 100% { transform: scale(1) rotate(0deg); }
25% { transform: scale(1.1) rotate(-2deg); }
75% { transform: scale(1.1) rotate(2deg); }
}
@keyframes mascotFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}
.mascot-speech-bubble.show {
animation: speechBubbleBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.mascot-svg.excited {
animation: mascotExcited 0.5s ease-in-out;
}
.mascot-svg.floating {
animation: mascotFloat 2s ease-in-out infinite;
}
/* Pet Mascot Base Styles */
.pet-mascot {
position: fixed;
bottom: 20px;
right: 20px;
width: 100px;
height: 100px;
z-index: 1000;
cursor: pointer;
transition: all 0.3s ease;
}
.pet-mascot:hover {
transform: scale(1.05);
}
/* Mascot Control Buttons */
.mascot-controls {
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1001;
}
.mascot-control-btn {
background: rgba(107, 115, 255, 0.9);
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
color: white;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
line-height: 1;
padding: 0;
}
.mascot-control-btn:hover {
background: rgba(107, 115, 255, 1);
transform: scale(1.1);
}
.mascot-control-btn:active {
transform: scale(0.95);
}
/* Mobile responsiveness for mascot */
@media (max-width: 768px) {
.pet-mascot {
width: 70px !important;
height: 70px !important;
bottom: 15px !important;
right: 15px !important;
}
.mascot-controls {
top: 50%;
right: 10px;
transform: translateY(-50%);
gap: 8px;
}
.mascot-control-btn {
width: 32px;
height: 32px;
font-size: 12px;
line-height: 1;
padding: 0;
}
.mascot-speech-bubble {
max-width: 140px;
font-size: 10px;
padding: 5px 8px;
bottom: 75px;
right: -10px;
}
.mood-indicator {
font-size: 16px;
top: -12px;
}
.energy-container {
top: -25px;
width: 70%;
left: 15%;
height: 3px;
}
}
@media (max-width: 480px) {
.pet-mascot {
width: 60px !important;
height: 60px !important;
bottom: 10px !important;
right: 10px !important;
}
.mascot-controls {
top: 50%;
right: 8px;
transform: translateY(-50%);
gap: 6px;
}
.mascot-control-btn {
width: 28px;
height: 28px;
font-size: 10px;
line-height: 1;
padding: 0;
}
.mascot-speech-bubble {
max-width: 120px;
font-size: 9px;
padding: 4px 6px;
bottom: 65px;
right: -15px;
}
.mood-indicator {
font-size: 14px;
top: -10px;
}
}