/* Mobile history container with flexbox */
.mobile-history-container {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 0;
    /* Removing gap to allow arrow overlap */
    padding-right: 5px;
    box-sizing: border-box;
    background-color: #e9ecef;
    border-radius: 9999px;
    /* Fully rounded edges to match circular button */
    padding: 6px;
}

/* Hidden state for mobile history panel */
.mobile-history-panel.hidden {
    display: none !important;
}

/* Breadcrumbs style for history */
.history-breadcrumbs {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    white-space: nowrap;
    flex-grow: 1;
    align-items: center;
    padding: 5px 0;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9rem;
    min-width: 0;
    /* CRITICAL: allows flex item to shrink below content size */
    margin-right: 10px;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    /* Fade out effect at right edge */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.history-breadcrumbs::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.history-breadcrumbs .history-move-entry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    padding: 0 10px 0 15px;
    /* Left padding creates space for the notch */
    margin-right: -8px;
    /* Negative margin to pull next item into the notch */
    background-color: #e9ecef;
    color: #495057;
    flex-shrink: 0;
    font-weight: 600;

    /* Arrow shape */
    clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%, 10px 50%);

    /* Transitions */
    transition: background-color 0.2s;
}

/* Chess piece icon size in move history */
.history-breadcrumbs .history-move-entry .piece-icon {
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 100;
}

/* First item doesn't need a notch */
.history-breadcrumbs .history-move-entry:first-child {
    padding-left: 10px;
    clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

/* Alternate colors for visual distinction */
.history-breadcrumbs .history-move-entry:nth-child(even) {
    background-color: #dee2e6;
}

/* Highlight the last move/active state */
.history-breadcrumbs .history-move-entry:last-child {
    background-color: #6c757d;
    color: white;
    padding-right: 15px;
    /* More space at the end */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 10px 50%);
    /* Flat end or simple arrow? Let's do flat end for last item or full arrow? */
    /* Let's keep the arrow point even for the last one, looks cooler */
    clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%, 10px 50%);
}

/* Specific styling for the very last item if it's the current "active" one */
.history-breadcrumbs .history-move-entry:last-child {
    background-color: #6c757d;
    color: white;
}

/* Controls section in history panel */
.history-controls {
    flex-shrink: 0;
    margin-left: 5px;
    z-index: 2;
    /* Ensure button stays on top */
}

/* Small square button for inline undo */
.mobile-icon-btn-small {
    width: 50px;
    height: 50px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* Rounded button looks better next to arrows */
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #495057;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mobile-icon-btn-small:active {
    background-color: #e9ecef;
    transform: translateY(1px);
}

.mobile-icon-btn-small:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Adjust mobile history panel padding */
.mobile-history-panel {
    padding: 0 10px 10px 10px;
    background-color: transparent;
    border-top: none;
    box-shadow: none;
    margin-top: 40px;
}

/* Dark theme for history breadcrumbs */
[data-theme="dark"] .mobile-history-container {
    background-color: #4a4a4a;
}

[data-theme="dark"] .history-breadcrumbs .history-move-entry {
    background-color: #4a4a4a;
    color: #e0e0e0;
}

[data-theme="dark"] .history-breadcrumbs .history-move-entry:nth-child(even) {
    background-color: #5a5a5a;
}

[data-theme="dark"] .history-breadcrumbs .history-move-entry:last-child {
    background-color: #5c7ba3;
    color: white;
}

/* Dark theme for mobile icon button */
[data-theme="dark"] .mobile-icon-btn-small {
    background-color: #454d55;
    border: 1px solid #555;
    color: #e0e0e0;
}

[data-theme="dark"] .mobile-icon-btn-small:active {
    background-color: #5a6268;
}

/* Dark theme for mobile history panel */
[data-theme="dark"] .mobile-history-panel {
    background-color: transparent;
    border-top: none;
    box-shadow: none;
}