/* Ensure chat stays centered when panel is visible */
body:has(.rpg-panel.rpg-position-right) #sheld {
    margin: auto !important;
}

body:has(.rpg-panel.rpg-position-left) #sheld {
    margin: auto !important;
}
/* ============================================
   RPG COMPANION - GAME-LIKE UI - RESPONSIVE
   ============================================ */

/* CSS Variables for Theming - Default uses SillyTavern's variables */
.rpg-panel,
#rpg-thought-panel,
#rpg-thought-icon,
#rpg-alt-present-characters,
.rpg-mobile-toggle {
    --rpg-bg: var(--SmartThemeBlurTintColor, rgba(26, 26, 46, 0.9));
    --rpg-accent: var(--black30a, rgba(22, 33, 62, 0.9));
    --rpg-text: var(--SmartThemeBodyColor, #eaeaea);
    --rpg-highlight: var(--SmartThemeQuoteColor, #e94560);
    --rpg-border: var(--SmartThemeBorderColor, #4a7ba7);
    --rpg-shadow: rgba(0, 0, 0, 0.5);
}

/* Main Panel Container - Fills available margin space */
.rpg-panel {
    position: fixed;
    top: var(--topBarBlockSize);
    bottom: 0;
    background: var(--rpg-bg);
    box-shadow: 0 0 20px var(--rpg-shadow);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
    z-index: 1000;
    color: var(--rpg-text);
    display: flex;
    flex-direction: column;
    overflow: visible;
    transition: width 0.3s ease, left 0.3s ease, right 0.3s ease, transform 0.3s ease;
}

/* Collapsed state - fixed width for collapse */
.rpg-panel.rpg-collapsed {
    max-width: 2.5rem !important;
    min-width: 2.5rem !important;
    left: auto !important;
    right: auto !important;
}

.rpg-panel.rpg-collapsed.rpg-position-right {
    right: 0 !important;
}

.rpg-panel.rpg-collapsed.rpg-position-left {
    left: 0 !important;
}

/* Fix positioning when collapsed - panel should stick to correct edge */
.rpg-panel.rpg-position-right.rpg-collapsed {
    left: calc(100vw - 40px);
    right: 0;
}

.rpg-panel.rpg-position-left.rpg-collapsed {
    right: calc(100vw - 40px);
    left: 0;
}

.rpg-panel.rpg-collapsed .rpg-game-container {
    opacity: 0;
    pointer-events: none;
}

/* Collapse/Expand Toggle Button */
.rpg-collapse-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1.875rem;
    height: 5rem;
    background: var(--rpg-accent);
    border: 2px solid var(--rpg-border);
    color: var(--rpg-highlight);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    transition: all 0.3s ease;
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    box-shadow: 0 0 10px var(--rpg-shadow);
    pointer-events: auto;
}

.rpg-collapse-toggle:hover {
    background: var(--rpg-highlight);
    color: var(--rpg-bg);
    box-shadow: 0 0 15px var(--rpg-highlight);
}

/* Position collapse button on the left side for right panel */
.rpg-panel.rpg-position-right .rpg-collapse-toggle {
    left: -2rem;
    border-radius: 0.5em 0 0 0.5em;
}

/* Position collapse button on the right side for left panel */
.rpg-panel.rpg-position-left .rpg-collapse-toggle {
    right: -2rem;
    border-radius: 0 0.5em 0.5em 0;
}

/* Hide collapse button for top position */
.rpg-panel.rpg-position-top .rpg-collapse-toggle {
    display: none;
}

/* Right Position (Default) - Panel fills right margin space from chat edge to screen edge */
.rpg-panel.rpg-position-right {
    right: 0;
    width: calc(50vw - var(--sheldWidth) / 2);
    border-left: 3px solid var(--rpg-border);
    box-shadow: -5px 0 20px var(--rpg-shadow);
}

/* Left Position - Panel fills left margin space from screen edge to chat edge */
.rpg-panel.rpg-position-left {
    left: 0;
    width: calc(50vw - var(--sheldWidth) / 2);
    border-right: 3px solid var(--rpg-border);
    box-shadow: 5px 0 20px var(--rpg-shadow);
}

/* Top Position */
.rpg-panel.rpg-position-top {
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 18.75rem;
    border-bottom: 3px solid var(--rpg-border);
    box-shadow: 0 5px 20px var(--rpg-shadow);
}

/* Top Position Layout Adjustments */
.rpg-panel.rpg-position-top .rpg-content-box {
    display: flex;
    flex-direction: row;
    gap: 0.938em;
}

.rpg-panel.rpg-position-top .rpg-section {
    flex: 1;
    min-width: 0;
}

.rpg-panel.rpg-position-top .rpg-divider {
    display: none;
}

.rpg-panel.rpg-position-top .rpg-stats-grid {
    gap: 0.5em;
}

.rpg-panel.rpg-position-top .rpg-stat-row {
    gap: 0.5em;
}

.rpg-panel.rpg-position-top .rpg-stat-label {
    min-width: 5.625rem;
}

.rpg-panel.rpg-position-top .rpg-stat-bar {
    height: 1.125rem;
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .rpg-panel {
        width: 20rem;
        max-width: 35vw;
        min-width: 16.25rem;
    }
}

@media (max-width: 768px) {
    .rpg-section-title {
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    /* Left position on mobile/tablet */
    body.rpg-panel-position-left #rpg-companion-panel.rpg-panel,
    #rpg-companion-panel.rpg-panel.rpg-position-left {
        left: 0 !important;
        right: auto !important;
        width: 85% !important;
        height: 100dvh !important;
        top: 0 !important;
        bottom: 0 !important;
    }

    /* Right position on mobile/tablet */
    body.rpg-panel-position-right #rpg-companion-panel.rpg-panel,
    #rpg-companion-panel.rpg-panel.rpg-position-right {
        left: auto !important;
        right: 0 !important;
        width: 85% !important;
        height: 100dvh !important;
        top: 0 !important;
        bottom: 0 !important;
    }

    /* Top position on mobile */
    #rpg-companion-panel.rpg-panel.rpg-position-top {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 40vh !important;
        top: 0 !important;
        bottom: auto !important;
    }
}

.rpg-panel.rpg-position-top .rpg-stats-title {
    font-size: clamp(1rem, 1.3vw, 1.3rem);
}

.rpg-panel.rpg-position-top .rpg-mood {
    font-size: clamp(0.875rem, 1vw, 1rem);
    padding: 0.375em;
}

.rpg-panel.rpg-position-top .rpg-classic-stats {
    margin-top: 0.5em;
    padding: 0.5em;
}

.rpg-panel.rpg-position-top .rpg-classic-stats-title {
    font-size: clamp(0.875rem, 1vw, 1rem);
    margin-bottom: 0.5em;
}

.rpg-panel.rpg-position-top .rpg-classic-stats-grid {
    gap: 0.375em;
}

.rpg-panel.rpg-position-top .rpg-classic-stat {
    padding: 0.25em;
}

.rpg-panel.rpg-position-top .rpg-classic-stat-label {
    font-size: clamp(0.75rem, 0.85vw, 0.875rem);
}

.rpg-panel.rpg-position-top .rpg-classic-stat-value {
    font-size: clamp(1rem, 1.3vw, 1.3rem);
}