.tool-btn[data-tool=“history”] {
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: #fff0;
touch-action: manipulation;
}

.tool-btn[data-tool=“history”] svg {
color: #6b7280;
pointer-events: none;
}

.tool-btn[data-tool=“history”].has-submenu::after {
content: ‘’;
position: absolute;
bottom: 6px;
right: 6px;
width: 4px;
height: 4px;
background: #5b657a;
border-radius: 50%;
transition: all 0.2s ease;
pointer-events: none;
}

.tool-btn[data-tool=“history”][aria-expanded=“true”]::after {
width: 0;
height: 0;
border-left: 4px solid #fff0;
border-right: 4px solid #fff0;
border-top: 4px solid #5b657a;
background: #fff0;
border-radius: 0;
}

.tool-btn[data-tool=“history”].touch-active,
.tool-btn[data-tool=“history”]:active {
background: #e8eaf0;
transform: scale(.95);
}

.tool-btn[data-tool=“history”].is-disabled {
opacity: .5;
pointer-events: none;
}

.history-submenu {
position: absolute;
left: calc(100% + 8px);
top: 50%;
transform: translateY(-50%) translateX(-8px) scale(.95);
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px;
background: #fff;
border: 1px solid #e6e8ee;
border-radius: 12px;
box-shadow: 0 4px 16px rgb(0 0 0 / .12), 0 2px 8px rgb(0 0 0 / .08);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 10000;
min-width: 160px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}

.history-submenu.touch-enabled {
padding: 10px;
gap: 8px;
min-width: 180px;
}

.history-submenu-absolute {
position: fixed !important;
transform: translateY(-50%) !important;
}

.history-submenu.show {
opacity: 1;
transform: translateY(-50%) translateX(0) scale(1);
pointer-events: all;
}

.history-submenu-btn {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
border: 1.5px solid #fff0;
background: #fff;
cursor: pointer;
transition: all 0.15s ease;
font-size: 14px;
font-family: system-ui, -apple-system, sans-serif;
color: #1b1f2a;
white-space: nowrap;
min-height: 44px;
min-width: 44px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: #fff0;
touch-action: manipulation;
position: relative;
}

.history-submenu-btn.touch-active,
.history-submenu-btn:active:not(:disabled) {
transform: scale(.96);
background: #e8eaf0;
border-color: #d1d5db;
}

@media (hover: hover) and (pointer: fine) {
.history-submenu-btn:hover:not(:disabled) {
background: #f0f2f5;
border-color: #e6e8ee;
transform: translateX(2px);
}
}

.history-submenu-btn:disabled {
opacity: .4;
cursor: not-allowed;
color: #9ca3af;
}

.history-submenu-btn.has-content:not(:disabled) {
background: #f0f9ff;
border-color: #bae6fd;
color: #0c4a6e;
}

.history-submenu-btn.has-content:not(:disabled).touch-active {
background: #dbeafe;
border-color: #7dd3fc;
}

@media (hover: hover) and (pointer: fine) {
.history-submenu-btn.has-content:not(:disabled):hover {
background: #e0f2fe;
border-color: #7dd3fc;
}
}

.history-submenu-btn svg {
width: 20px;
height: 20px;
flex-shrink: 0;
color: currentColor;
pointer-events: none;
}

.history-submenu-btn .label {
flex: 1;
text-align: left;
font-weight: 500;
pointer-events: none;
}

.history-submenu-btn .shortcut {
font-size: 11px;
color: #6b7280;
margin-left: auto;
padding: 3px 6px;
background: #f3f4f6;
border-radius: 4px;
font-family: ‘SF Mono’, ‘Monaco’, ‘Inconsolata’, ‘Consolas’, monospace;
flex-shrink: 0;
pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
.history-submenu-btn:hover .shortcut {
background: #e5e7eb;
}
}

.history-submenu-btn.has-content .shortcut {
background: #dbeafe;
color: #1e40af;
}

.toolctx-history {
display: inline-flex;
align-items: center;
gap: 12px;
}

.toolctx-history .label {
font-weight: 600;
color: #374151;
min-width: 60px;
}

.toolctx-history .hint {
font-size: 13px;
color: #6b7280;
font-style: italic;
}

.history-submenu-btn:focus-visible {
outline: 3px solid #3b82f6;
outline-offset: 2px;
}

.tool-btn[data-tool=“history”]:focus-visible {
outline: 3px solid var(–focus, #ffbf47);
outline-offset: 2px;
}

@keyframes pulse {
0% { opacity: 1; }
50% { opacity: .7; }
100% { opacity: 1; }
}

.history-submenu-btn.state-changing {
animation: pulse 0.3s ease;
}

@keyframes ripple {
from {
opacity: .6;
transform: scale(0);
}
to {
opacity: 0;
transform: scale(2);
}
}

.history-submenu-btn::before {
content: ‘’;
position: absolute;
inset: 0;
border-radius: inherit;
background: currentColor;
opacity: 0;
pointer-events: none;
}

.history-submenu-btn.touch-active::before {
animation: ripple 0.4s ease-out;
}

@media (max-width: 1024px) {
.history-submenu {
min-width: 170px;
padding: 10px;
gap: 8px;
}

.history-submenu-btn {
padding: 12px 14px;
font-size: 15px;
min-height: 48px;
gap: 12px;
}

.history-submenu-btn svg {
width: 22px;
height: 22px;
}
}

@media (max-width: 920px) {
.history-submenu {
left: calc(100% + 4px);
min-width: 150px;
}

.history-submenu-btn {
padding: 10px 12px;
font-size: 14px;
min-height: 44px;
gap: 10px;
}

.history-submenu-btn svg {
width: 20px;
height: 20px;
}

.history-submenu-btn .shortcut {
font-size: 10px;
padding: 2px 4px;
}

.tool-btn[data-tool=“history”].has-submenu::after {
bottom: 5px;
right: 5px;
width: 3px;
height: 3px;
}
}

@media (max-width: 640px) {
.history-submenu {
left: auto;
right: 100%;
margin-right: 8px;
min-width: 140px;
}

.history-submenu-btn {
padding: 12px 14px;
min-height: 48px;
}
}

@media (max-width: 480px) {
.history-submenu-btn .shortcut {
display: none;
}

.history-submenu {
min-width: 130px;
padding: 8px;
}

.history-submenu-btn {
padding: 12px 10px;
gap: 8px;
}
}

@media (max-height: 500px) and (orientation: landscape) {
.history-submenu {
max-height: 90vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}

@media (prefers-contrast: high) {
.history-submenu { border-width: 2px; }
.history-submenu-btn { border-width: 2px; }
.history-submenu-btn.has-content:not(:disabled) { border-width: 2px; }
}

@media (prefers-reduced-motion: reduce) {
.history-submenu,
.history-submenu-btn,
.tool-btn[data-tool=“history”] {
transition: none;
}

.history-submenu-btn::before {
animation: none;
}

.history-submenu.show {
transform: translateY(-50%);
}
}

@media (prefers-color-scheme: dark) {
.history-submenu {
background: #1f2937;
border-color: #374151;
box-shadow: 0 4px 16px rgb(0 0 0 / .4), 0 2px 8px rgb(0 0 0 / .3);
}

.history-submenu-btn {
background: #1f2937;
color: #e5e7eb;
}

.history-submenu-btn.touch-active,
.history-submenu-btn:active:not(:disabled) {
background: #374151;
border-color: #4b5563;
}

@media (hover: hover) and (pointer: fine) {
.history-submenu-btn:hover:not(:disabled) {
background: #374151;
border-color: #4b5563;
}
}

.history-submenu-btn.has-content:not(:disabled) {
background: #1e3a5f;
border-color: #1e40af;
color: #bfdbfe;
}

.history-submenu-btn.has-content:not(:disabled).touch-active {
background: #1e40af;
border-color: #2563eb;
}

@media (hover: hover) and (pointer: fine) {
.history-submenu-btn.has-content:not(:disabled):hover {
background: #1e40af;
border-color: #2563eb;
}
}

.history-submenu-btn .shortcut {
background: #374151;
color: #9ca3af;
}

@media (hover: hover) and (pointer: fine) {
.history-submenu-btn:hover .shortcut {
background: #4b5563;
}
}

.history-submenu-btn.has-content .shortcut {
background: #1e3a5f;
color: #93c5fd;
}

.toolctx-history .label { color: #e5e7eb; }
.toolctx-history .hint { color: #9ca3af; }

.tool-btn[data-tool=“history”].has-submenu::after { background: #9ca3af; }

.tool-btn[data-tool=“history”][aria-expanded=“true”]::after {
border-top-color: #9ca3af;
}
}

@media print {
.history-submenu,
.tool-btn[data-tool=“history”] {
display: none !important;
}
}

.history-submenu,
.history-submenu-btn,
.tool-btn[data-tool=“history”] {
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform, opacity;
}

.history-submenu-btn {
-webkit-appearance: none;
appearance: none;
}

/* Removed transparent outline rule that hid keyboard focus (WCAG 2.4.11).
   Visible focus is provided by the :focus-visible rules below. */

.history-submenu-btn:focus-visible,
.tool-btn[data-tool=“history”]:focus-visible {
outline: 3px solid #3b82f6;
outline-offset: 2px;
}