/* Base Variables - Reimporting previous context conceptually, 
   but since we completely rewrote style.css in step 48 to only include Editor styles, 
   we missed the root variables! This is why it looks bad. 
   Restoring root variables + new Hero styles. */

:root {
    --bg-color: #0f172a;
    --text-color: #f8fafc;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --primary-color: #3b82f6;
    --primary-hover: #2563eb;
    --accent-color: #8b5cf6;
    --radius-lg: 1rem;
    --radius-md: 0.5rem;
    --font-main: 'Inter', 'Noto Sans JP', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-color);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    /* Center content vertically if needed, but flex layout is better */
}

/* Background Effects */
.background-blobs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.blob {
    position: absolute;
    filter: blur(80px);
    opacity: 0.6;
    border-radius: 50%;
    animation: float 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

.blob-1 {
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, #3b82f6 0%, transparent 60%);
    top: -10%;
    left: -10%;
}

.blob-2 {
    width: 40vw;
    height: 40vw;
    background: radial-gradient(circle, #8b5cf6 0%, transparent 60%);
    bottom: -10%;
    right: -10%;
    animation-delay: -5s;
}

.blob-3 {
    width: 30vw;
    height: 30vw;
    background: radial-gradient(circle, #ec4899 0%, transparent 60%);
    top: 40%;
    left: 40%;
    animation-delay: -10s;
}

@keyframes float {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(100px, 50px) scale(1.1);
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

header {
    text-align: center;
    margin-bottom: 1rem;
}

header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(to right, #3b82f6, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

header p {
    color: #94a3b8;
}

/* Glass Panel */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Buttons */
.primary-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
}

.primary-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.mini-btn {
    padding: 2px 8px;
    font-size: 0.8rem;
    min-width: 32px;
}

.secondary-btn {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: white;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.secondary-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}


/* Layout Update */
.editor-layout {
    display: flex;
    gap: 1.5rem;
    flex: 1;
    /* Take remaining height */
    min-height: 0;
    /* Important for scroll */
    margin-bottom: 2rem;
}

/* Sidebar */
.gallery-sidebar {
    width: 250px;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.gallery-sidebar h3 {
    font-size: 1rem;
    color: #94a3b8;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--glass-border);
}

.thumbnail-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-right: 0.5rem;
}

/* Scrollbar styling */
.thumbnail-list::-webkit-scrollbar {
    width: 6px;
}

.thumbnail-list::-webkit-scrollbar-track {
    background: transparent;
}

.thumbnail-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.thumb-item {
    position: relative;
    cursor: pointer;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.2s;
    height: 120px;
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    /* Drag & Drop */
    user-select: none;
}

.thumb-item.dragging {
    opacity: 0.5;
    transform: scale(0.95);
    border-color: var(--accent-color);
}

.thumb-item.drag-over {
    border-top: 2px solid var(--accent-color);
}

.thumb-item.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.7rem;
    display: flex;
    justify-content: space-between;
}

.sidebar-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border);
}

/* Main Editor */
.editor-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    position: relative;
}

/* Toolbar */
.toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--glass-border);
}

.tool-group {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: 4px;
    gap: 4px;
}

.tool-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.tool-btn:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.tool-btn.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Sub Selector (Generic) */
.sub-selector {
    display: flex;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
    border-radius: var(--radius-md);
    margin-left: 0.5rem;
    animation: fadeIn 0.3s ease;
    align-items: center;
}

.sub-selector.hidden {
    display: none;
}

/* Specific adjustments if needed */

.slider-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #94a3b8;
    font-size: 0.85rem;
}

.slider-label input[type="range"] {
    width: 100px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.small-text {
    font-size: 0.8rem;
    white-space: nowrap;
}

.emoji-option {
    font-size: 1.5rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: transform 0.2s;
}

.emoji-option:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.2);
}

.emoji-option.selected {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 1px var(--primary-color);
}

/* Custom Emoji Input Styling */
.custom-emoji-input {
    width: 60px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: white;
    font-size: 1.2rem;
    text-align: center;
    outline: none;
    transition: all 0.2s;
}

.custom-emoji-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
}

.custom-emoji-input:focus,
.custom-emoji-input.selected-input {
    border-color: var(--primary-color);
    background: rgba(59, 130, 246, 0.2);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.filename-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 0.4rem 0.8rem;
    color: white;
    font-size: 0.9rem;
    margin-right: 0.5rem;
    width: 150px;
    outline: none;
    transition: all 0.2s;
}

.filename-input:focus {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.1);
}

/* Zoom Controls */
.zoom-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-md);
    margin-left: 0.5rem;
}

.zoom-group input[type="range"] {
    width: 80px;
    accent-color: var(--primary-color);
}

#zoomPercent {
    min-width: 45px;
    text-align: right;
}

/* Action Group (Right aligned) */
.action-group {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.size-limit-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-md);
}

.size-input {
    width: 60px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: white;
    padding: 2px 4px;
    font-size: 0.9rem;
    outline: none;
    text-align: center;
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}

.checkbox-container input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--primary-color);
}

/* Canvas Area */
.canvas-container {
    flex: 1;
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    overflow: auto;
    /* Allow scrolling when zoomed */
    display: block;
    /* Change from flex center to block for correct scrolling */
    text-align: center;
    /* Center small images horizontally */
    cursor: crosshair;
    /* Indicate drawing */
    touch-action: none;
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll on iOS */
}

/* Ensure canvas has some space and is centered at small sizes */
#editorCanvas {
    display: inline-block;
    vertical-align: middle;
    margin: auto;
}

/* Vertical centering trick using pseudo-element or flex on a wrapper, 
   but for simplicity, we'll use a container check in JS if needed. 
   Alternatively, use a min-width/height on the container. */


/* Specific cursor for pan tool */
.canvas-container.pan-mode {
    cursor: grab;
    touch-action: auto;
    /* Enable native pan/zoom in pan mode */
}

.canvas-container.pan-mode:active,
.canvas-container.panning {
    cursor: grabbing;
}

/* Hero Upload (Updated) */
.hero-upload {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}

.hero-content {
    text-align: center;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    padding: 3rem;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    max-width: 500px;
    width: 90%;
    animation: heroFadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-icon-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
}

.hero-icon-wrapper svg {
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.5));
}

.hero-icon-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: var(--accent-color);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.hero-content h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    background: linear-gradient(to right, #fff, #94a3b8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-content p {
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.hero-btn {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    border-radius: 50px;
    /* Pill shape */
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.5);
    transition: transform 0.2s, box-shadow 0.2s;
    color: white;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

.hero-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 15px 30px -5px rgba(59, 130, 246, 0.6);
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-upload.hidden {
    display: none;
}

canvas {
    max-width: none;
    /* Disable constraints when zooming */
    max-height: none;
    transition: width 0.1s ease-out, height 0.1s ease-out;
    /* Smooth zoom transition */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    background-color: #000;
}

/* If not zoomed, fit to container */
canvas.fit-view {
    max-width: 100%;
    max-height: 100%;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.loading-overlay.hidden {
    display: none;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Update sidebar actions for Download All */
.sidebar-actions {
    display: flex;
    gap: 0.5rem;
}

.sidebar-actions button {
    flex: 1;
    /* equal width */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

/* Responsive Design */
@media (max-width: 900px) {
    .container {
        padding: 1rem;
        height: auto;
        min-height: 100vh;
    }

    .editor-layout {
        flex-direction: column-reverse;
        /* Sidebar moves to bottom */
        height: auto;
    }

    .gallery-sidebar {
        width: 100%;
        height: 250px;
    }

    .thumbnail-list {
        flex-direction: row;
        overflow-y: hidden;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

    .thumb-item {
        width: 150px;
        height: 100px;
        flex-shrink: 0;
    }

    .toolbar {
        flex-wrap: wrap;
    }

    .action-group {
        width: 100%;
        justify-content: space-between;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--glass-border);
    }

    .canvas-container {
        min-height: 400px;
    }
}

@media (max-width: 600px) {
    header h1 {
        font-size: 1.8rem;
    }

    .hero-content {
        padding: 1.5rem 1rem;
        width: 95%;
        border-radius: 1.5rem;
    }

    .hero-content h2 {
        font-size: 1.4rem;
        margin-bottom: 0.75rem;
    }

    .hero-content p {
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
        line-height: 1.4;
    }

    .hero-icon-wrapper svg {
        width: 48px;
        height: 48px;
    }

    .hero-btn {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
        width: 100%;
        max-width: 250px;
    }

    .tool-btn {
        padding: 0.5rem 0.7rem;
        font-size: 0.8rem;
    }

    .tool-group {
        width: 100%;
        justify-content: center;
        gap: 8px;
    }

    .sub-selector {
        width: 100%;
        margin-left: 0;
        margin-top: 0.5rem;
        justify-content: center;
    }

    .size-limit-group {
        flex-wrap: nowrap;
        justify-content: center;
        width: 100%;
    }

    .filename-input {
        width: 100%;
        margin-right: 0;
    }

    .action-group {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
        margin-top: 1rem;
    }

    .zoom-group {
        width: 100%;
        justify-content: center;
        margin-left: 0;
        margin-top: 0.5rem;
    }

    .zoom-group input[type="range"] {
        flex: 1;
        max-width: 200px;
    }

    .primary-btn.small-btn {
        width: 100%;
        padding: 0.8rem;
    }

    .canvas-container {
        min-height: 350px;
    }
}

/* Footer Styles */
.app-footer {
    text-align: center;
    padding: 1.5rem 0 1rem;
    margin-top: auto;
}

.footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.75rem;
}

.footer-link {
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-link:hover {
    color: #94a3b8;
}

.footer-separator {
    color: #475569;
}

/* Support Link Styles (Subtle) */
.support-link-text {
    opacity: 0.8;
}

.support-link-text:hover {
    color: #ffbd00 !important;
    /* BMC Yellow only on hover */
    opacity: 1;
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
    animation: modalFadeIn 0.3s ease;
}

.modal.hidden,
.hidden {
    display: none !important;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    animation: modalSlideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--glass-border);
}

.modal-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    background: linear-gradient(to right, #fff, #94a3b8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.modal-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 2rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    line-height: 1;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.modal-body section {
    margin-bottom: 1.5rem;
}

.modal-body section:last-child {
    margin-bottom: 0;
}

.modal-body h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 0.75rem;
}

.modal-body p {
    color: #cbd5e1;
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

.modal-body ul {
    list-style: none;
    padding-left: 0;
}

.modal-body li {
    color: #cbd5e1;
    line-height: 1.7;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.modal-body li::before {
    content: "•";
    position: absolute;
    left: 0.5rem;
    color: var(--primary-color);
}

.modal-body strong {
    color: #f1f5f9;
    font-weight: 600;
}

/* Modal Responsive */
@media (max-width: 600px) {
    .modal {
        padding: 0.5rem;
    }

    .modal-content {
        max-height: 90vh;
    }

    .modal-header {
        padding: 1rem;
    }

    .modal-header h2 {
        font-size: 1.2rem;
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-body h3 {
        font-size: 1rem;
    }

    .footer-links {
        font-size: 0.7rem;
    }
}