/* PFP Generator Window Styles */
#pfp-window {
    /* Width and height moved to inline styles in HTML */
    /* Positioning handled by base .window class and inline styles */
}

.pfp-container {
    display: flex;
    gap: 10px;
    height: 100%;
    padding: 5px;
}

#pfp-window .window-content {
    overflow: visible !important;
}

/* Left Panel - Trait Selection */
.pfp-left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 2px inset #dfdfdf;
    background: #c0c0c0;
}

/* Tabs */
.pfp-tabs {
    display: flex;
    background: #c0c0c0;
    border-bottom: 2px groove #dfdfdf;
    padding: 2px 2px 0 2px;
}

.pfp-tab {
    padding: 4px 8px;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 11px;
    background: #c0c0c0;
    border: 2px outset #dfdfdf;
    border-bottom: none;
    cursor: pointer;
    margin-right: 2px;
    position: relative;
    top: 2px;
}

.pfp-tab:hover {
    background: #d4d4d4;
}

.pfp-tab:active {
    border: 2px inset #dfdfdf;
    padding: 5px 7px 3px 9px;
}

.pfp-tab.active {
    background: #fff;
    border: 2px outset #dfdfdf;
    border-bottom: 2px solid #fff;
    z-index: 2;
    top: 0;
    padding: 5px 8px 6px 8px;
}

/* Trait Grid */
.pfp-trait-grid {
    flex: 1;
    background: #fff;
    padding: 10px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 8px;
    align-content: start;
}

/* Trait Thumbnail */
.trait-thumb {
    width: 70px;
    height: 70px;
    border: 2px solid #c0c0c0;
    background: #fff;
    cursor: pointer;
    position: relative;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trait-thumb:hover {
    border: 2px outset #dfdfdf;
    background: #f0f0f0;
}

.trait-thumb.selected {
    border: 2px solid #000080;
    background: #e1e1ff;
}

.trait-thumb.selected::after {
    content: '✓';
    position: absolute;
    top: 2px;
    right: 2px;
    background: #000080;
    color: #fff;
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.trait-thumb img {
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.trait-thumb.none {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 10px;
    color: #666;
}

/* Trait tooltip */
.trait-thumb::before {
    content: attr(data-name);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffe1;
    border: 1px solid #000;
    padding: 2px 4px;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 100;
}

.trait-thumb:hover::before {
    opacity: 1;
}

/* Right Panel - Preview */
.pfp-right-panel {
    width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

.canvas-container {
    border: 2px inset #dfdfdf;
    background: #000;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#pfp-canvas {
    background: #008080;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    width: 320px;
    height: 320px;
}

/* Buttons */
.pfp-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.pfp-btn {
    padding: 5px 15px;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 11px;
    background: #c0c0c0;
    border: 2px outset #dfdfdf;
    cursor: pointer;
    min-width: 100px;
}

.pfp-btn:active {
    border: 2px inset #dfdfdf;
    padding: 6px 14px 4px 16px;
}

.pfp-btn:focus {
    outline: 1px dotted #000;
    outline-offset: -4px;
}

.pfp-btn.primary {
    font-weight: bold;
}

/* Info text */
.pfp-info {
    text-align: center;
    font-size: 10px;
    color: #666;
    padding: 5px;
    margin-top: auto;
    font-family: 'MS Sans Serif', sans-serif;
}

/* Scrollbar styling */
.pfp-trait-grid::-webkit-scrollbar {
    width: 16px;
}

.pfp-trait-grid::-webkit-scrollbar-track {
    background: #c0c0c0;
    border: 1px solid #dfdfdf;
}

.pfp-trait-grid::-webkit-scrollbar-thumb {
    background: #808080;
    border: 2px outset #dfdfdf;
}

.pfp-trait-grid::-webkit-scrollbar-thumb:active {
    background: #606060;
    border: 2px inset #dfdfdf;
}

/* Loading state */
.pfp-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #c0c0c0;
    border: 2px outset #dfdfdf;
    padding: 20px;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 11px;
    z-index: 10;
}