/* Global styles */
body { font-family: 'Roboto', 'Helvetica', sans-serif; }

/* Masonry Grid Layout for AI Character Lists - Auto-sized rows prevent overlap */
.ai-character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Smaller minimum for better packing */
    grid-gap: 6px; /* Tighter gaps */  
    grid-auto-rows: auto; /* Let rows size based on content - no minimum */
    grid-auto-flow: dense; /* Pack items densely */
    padding: 8px;
    align-items: start;
}

/* AI Character Item - Full Image with Overlay Title */
.ai-character-item {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: all 0.3s ease;
    display: block;
    margin-bottom: 0 !important;
    padding: 0 !important;
    position: relative;
    text-decoration: none;
    color: inherit;
    min-height: 160px; /* Ensure minimum height */
    min-width: 200px; /* Ensure minimum width - fixes width 0 issue */
    isolation: isolate; /* Create stacking context */
}

.ai-character-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    color: inherit;
}

/* Different card sizes for masonry effect - no row spans to prevent overlap */
.ai-character-item.size-small {
    /* No grid-row span - let content determine height */
    aspect-ratio: 1.1;
}

.ai-character-item.size-medium {
    /* No grid-row span - let content determine height */
    aspect-ratio: 0.85;
}

/* Removed size-large and size-wide - they cause layout breaks */

/* Very wide items - only these span 2 columns (2.5:1+ aspect ratio) */
.ai-character-item.landscape {
    aspect-ratio: 2.8;
    grid-column: span 2; /* Take 2 columns for extremely wide images */
}

/* Wide single-column items (1.3:1 to 2:1 aspect ratio) */
.ai-character-item.wide-single {
    aspect-ratio: 1.5;
    /* Single column - no grid-column span */
}

/* Very tall items */
.ai-character-item.portrait {
    aspect-ratio: 0.65;
    /* Single column - no grid-column span */
}

/* Moderately tall single-column items */
.ai-character-item.tall-single {
    aspect-ratio: 0.8;
    /* Single column - no grid-column span */
}

/* Make square items actually square-ish */
.ai-character-item.square {
    aspect-ratio: 1; /* Perfect square */
    /* No grid-row span - let content determine height */
}

/* Remove the primary content container - not needed for full image */
.ai-character-item .mdl-list__item-primary-content {
    display: block;
    height: 100%;
    padding: 0;
    position: relative;
}

/* Override MDL chip background colors */
.ai-character-item .mdl-chip__contact.mdl-list__item-avatar,
.mdl-chip__contact.mdl-list__item-avatar {
    background-color: transparent !important;
}

/* Ensure no background colors show through for all chip-related elements */
.ai-character-item .mdl-chip__contact,
.ai-character-item .mdl-list__item-avatar {
    background-color: transparent !important;
    background: none !important;
}

/* Avatar section - conditional height based on description presence */
.ai-character-item .mdl-chip__contact {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%; /* Full height by default */
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    border-radius: 12px;
    background-color: transparent !important;
    display: block;
    min-width: 200px;
    min-height: 160px;
    box-sizing: border-box;
}

/* When description exists, leave space at bottom (JS adds has-description class) */
.ai-character-item.has-description .mdl-chip__contact {
    height: calc(100% - 100px); /* Leave 100px space for description */
    border-radius: 12px 12px 0 0; /* Only round top corners */
    min-height: 120px;
}

.ai-avatar-icon {
    width: 100%;
    height: 100%;
    object-fit: cover !important; /* Force cover to fill container */
    object-position: center;
    margin: 0;
    padding: 0;
    border: none;
    transition: transform 0.3s ease;
    border-radius: 12px;
    display: block;
    box-sizing: border-box;
    background-color: #f0f0f0; /* Loading state background */
    background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

/* For images that should fill the container completely */
.ai-character-item.fill-image .ai-avatar-icon {
    object-fit: cover;
}

/* For portrait images, use cover to avoid letterboxing */
.ai-character-item.portrait .ai-avatar-icon {
    object-fit: cover;
    object-position: center top;
}

/* For landscape images, use cover to avoid pillarboxing */
.ai-character-item.landscape .ai-avatar-icon {
    object-fit: cover;
    object-position: center;
}

/* Remove loading animation once image loads */
/* This rule is now defined above with loading animation */

/* Loading shimmer animation */
@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Removed size-large specific rule */

.ai-character-item:hover .ai-avatar-icon {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* Title pill - overlay on image with more horizontal space */
.ai-name {
    position: absolute;
    bottom: 12px; /* Back to image overlay position */
    left: 8px;
    right: 8px; /* More horizontal space */
    height: auto; /* Allow height to adjust */
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    color: white;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 12px;
    border-radius: 16px; /* Pill shape */
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    z-index: 2;
    
    /* Allow text wrapping for longer titles */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Allow 2 lines for longer titles */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

/* Alternative light pill for bright images */
.ai-character-item.light-overlay .ai-name {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Description - regular text at bottom (not a pill) */
.mdl-list__item-text-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px; /* Dedicated bottom space */
    background: rgba(255, 255, 255, 0.68); /* Nearly opaque background */
    /* padding: 12px 16px; */
    border-radius: 0 0 12px 12px; /* Only round bottom corners */
    color: #333;
    font-size: 11px;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5; /* More lines for full description */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    z-index: 0; /* Behind title pill */
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Hide description area when empty */
.mdl-list__item-text-body:empty {
    display: none;
}

/* Description pill on bright images - darker background for contrast */
.ai-character-item.light-overlay .mdl-list__item-text-body {
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradient overlay for better title readability on image */
.ai-character-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
    border-radius: 0 0 12px 12px;
    z-index: 1; /* Behind title pill but above image */
    pointer-events: none;
}

/* Hide gradient when description exists (handled by JS class) */
.ai-character-item.has-description::after {
    display: none;
}

/* Enhanced hover effects */
.ai-character-item:hover::after {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.5)); /* Stronger gradient on hover */
}

.ai-character-item:hover .ai-name {
    background: rgba(0, 0, 0, 0.85);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Hover effect for description text area */
.ai-character-item:hover .mdl-list__item-text-body {
    background: rgba(255, 255, 255, 1); /* Fully opaque on hover */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Light overlay variant hover */
.ai-character-item.light-overlay:hover .ai-name {
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Ensure proper stacking */
.ai-character-item {
    isolation: isolate; /* Create stacking context */
}

/* Text content - make it more prominent */
.ai-name {
    font-weight: 600; /* Bolder text */
    font-size: 15px; /* Larger text */
    line-height: 1.2;
    margin-bottom: 6px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #dcdcdc;
    text-align: center; /* Center the text */
    flex-shrink: 0; /* Don't shrink */
}

/* Removed duplicate mdl-list__item-text-body rule - using main pill definition above */

/* Removed duplicate size variants - keeping original definitions from lines 41-80 */

/* Responsive adjustments for tighter packing */
@media (max-width: 1200px) {
    .ai-character-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        grid-gap: 6px;
        padding: 8px;
    }
    
    .ai-character-item.size-wide,
    .ai-character-item.landscape {
        grid-column: span 1; /* Disable wide cards on smaller screens */
    }
}

@media (max-width: 840px) {
    .ai-character-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        grid-gap: 5px;
        padding: 6px;
    }
    
    .ai-name {
        font-size: 13px; /* Slightly smaller text on mobile */
        padding: 6px 10px;
    }
}

@media (max-width: 480px) {
    .ai-character-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        grid-gap: 4px;
        padding: 4px;
    }
    
    .ai-name {
        font-size: 12px;
        padding: 5px 8px;
    }
}

/* AI Chatbot Card Styling */
.ai-bot-item {
    margin-bottom: 20px;
    padding: 8px;
    box-sizing: border-box;
}

.ai-bot-card {
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
    position: relative;
}

.ai-bot-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.ai-avatar-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center top;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #f5f5f5;
}

.ai-bot-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 100px;
}

.ai-bot-info h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-bot-info p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-height: 60px;
}

/* Also fix the AI character item in list view */
.ai-character-item {
    margin-bottom: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    background-color: #fff;
    overflow: hidden;
    /* padding: 12px !important; */
    background: transparent;
}

.ai-character-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

/* Removed duplicate ai-avatar-icon rule - using main definition above */

.ai-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

/* Removed another duplicate mdl-list__item-text-body rule - using main pill definition */

/* All search data grid layout fix */
.all-search-data {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}

/* Medium screens */
@media (max-width: 840px) and (min-width: 480px) {
    .ai-avatar-image {
        height: 180px;
    }
    
    .ai-bot-info {
        min-height: 80px;
    }
}

/* Small screens */
@media (max-width: 479px) {
    .ai-avatar-image {
        height: 160px;
    }
    
    .ai-bot-info {
        min-height: 70px;
    }
    
    .ai-bot-info h3 {
        font-size: 16px;
    }
    
    .ai-bot-info p {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }
}

/* Modal dialog styling fixes */
.mdl-dialog {
    min-width: 300px !important;
    /* width: 30vw !important; */
    /* max-width: 600px !important; */
}

/* Modal background blur effect */
:root {
    --modal-blur-amount: 3px;
}

body.modal-blur > *:not(dialog) {
    filter: blur(var(--modal-blur-amount));
    transition: filter 0.2s ease-in-out;
}

body.modal-blur dialog {
    filter: none !important;
}

/* For fullscreen modals on mobile */
.mdl-dialog--phone-fullscreen {
    width: 98% !important;
    height: 98% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Auth dialogs specific styling */
#login-dialog, #signup-dialog {
    min-width: 300px !important;
    width: 30vw !important;
    max-width: 500px !important;
}

/* Mobile responsive modal sizing */
@media (max-width: 768px) {
    .mdl-dialog {
        width: 90vw !important;
        min-width: 280px !important;
    }
    
    #login-dialog, #signup-dialog {
        width: 90vw !important;
        min-width: 280px !important;
    }
}

/* Remove unused old styles - cleanup */
.example-ai-cats .ai-character-grid .ai-character-item .mdl-list__item-primary-content,
.ai-character-grid .ai-character-item .mdl-list__item-primary-content {
    padding: 0; /* Override any old padding */
}

.example-ai-cats .ai-character-grid .ai-character-item .mdl-chip__contact,
.ai-character-grid .ai-character-item .mdl-chip__contact {
    margin: 0; /* Override any old margin */
}

/* Performance optimization - will-change for animations */
.ai-character-item,
.ai-avatar-icon,
.ai-name {
    will-change: transform;
}

/* Removed duplicate ai-avatar-icon loading rule - consolidated into main rule above */

.ai-avatar-icon[src] {
    background: none;
    animation: none;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* AI Character Creation Form Styles */
.newuserdropzone {
    margin-bottom: 20px;
}

.newuserdropzone .mdl-textfield {
    display: block;
    width: 100%;
    margin-bottom: 16px;
}

.newuserdropzone .mdl-textfield__input {
    width: 100%;
}

.newuserdropzone textarea {
    width: 100%;
    min-height: 80px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    font-family: 'Roboto', 'Helvetica', sans-serif;
    font-size: 14px;
    resize: vertical;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.newuserdropzone textarea:focus {
    outline: none;
    border-color: #3f51b5;
    box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.1);
}

.newuserdropzone textarea::placeholder {
    color: #999;
    opacity: 1;
}

/* Fix MDL textfield spacing */
.newuserdropzone .mdl-textfield {
    padding: 20px 0;
}

/* Avatar upload section */
.newuserdropzone .new-ai-avatar-upload {
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 16px;
    vertical-align: middle;
}

.newuserdropzone .new-ai-avatar-upload img {
    border-radius: 50%;
    object-fit: cover;
}

/* Checkbox alignment */
.newuserdropzone .mdl-checkbox {
    margin-top: 16px;
    margin-bottom: 16px;
}

/* General form spacing in dialogs */
dialog .mdl-list__item-primary-content {
    display: block;
    width: 100%;
}

dialog .drop-zone {
    margin-bottom: 20px;
}

/* Ensure proper spacing between form elements */
#ainameme,
#aigreetingme,
#aidescriptionme {
    margin-bottom: 20px \!important;
}

/* Fix textarea containers */
.mdl-textfield:has(textarea) {
    width: 100%;
    padding: 0;
    margin-bottom: 16px;
}

/* Override MDL default styles for better spacing */
dialog .mdl-textfield.is-upgraded {
    padding-bottom: 20px;
}
EOF < /dev/null