/* === CUSTOM TOOLS STACKING PANELS === */
#customToolsContainer {
    display: flex;
    flex-direction: column;
}
.custom-tool-section {
    border-bottom: 1px solid var(--border);
}
.custom-tool-section-header {
    padding: 6px 10px;
    font-size: 11px;
    transition: background 0.15s;
}
.custom-tool-section-header:hover {
    background: var(--bg-hover) !important;
}
.custom-tool-section-content {
    border-top: 1px solid rgba(99, 102, 241, 0.1);
}
.custom-tool-section-content .custom-tool-panel {
    font-size: 11px;
}
.custom-tool-section-content .btn-toolbar {
    font-size: 10px;
}

/* === CUSTOM TOOL MANAGEMENT UI === */
.custom-tool-wrapper {
    position: relative;
    display: inline-flex;
}
.custom-tool-wrapper:hover .custom-tool-delete-badge {
    opacity: 1;
    transform: scale(1);
}

.custom-tool-delete-badge {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 16px;
    height: 16px;
    background: var(--danger);
    color: white;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.12s, transform 0.12s;
    pointer-events: auto;
}
.custom-tool-delete-badge:hover {
    background: #c93035;
    transform: scale(1.1) !important;
}

.custom-tool-section-header .custom-tool-header-btn {
    flex-shrink: 0;
}

/* Blend group layer indicator */
.layer-item .blend-indicator {
    color: var(--success);
    font-size: 10px;
    margin-inline-end: 3px;
}

/* Add Tool Dialog Scrollbar */
#addToolDialog > div::-webkit-scrollbar {
    width: 5px;
}
#addToolDialog > div::-webkit-scrollbar-thumb {
    background: #3a3d46;
    border-radius: 3px;
}

/* Effect layer items in layer list */
.layer-item.effect-layer-item {
    border-inline-start: 3px solid #d4a017;
    background: rgba(212, 160, 23, 0.03);
}
.layer-item.effect-layer-item.selected {
    background: rgba(212, 160, 23, 0.08);
    border-inline-start-color: #eab308;
}
.layer-item.effect-layer-item .layer-name {
    color: #d4a017 !important;
}
.layer-item.effect-layer-item:hover {
    background: rgba(212, 160, 23, 0.06);
}

/* === ADDITIONAL POLISH === */

/* Global scrollbar → see Dark Theme Refinements section below */

/* Ensure no excessive glow/shadow on selection states */
::selection {
    background: var(--accent);
    color: #fff;
}

/* [v4.8.6] إزالة حلقة التركيز الملونة الثابتة: كانت النقرة على أزرار
   التايملاين/شريط الأدوات تُبقي إطاراً ملوناً (outline بنفس لون --accent)
   حول الزر يبدو كاختيارٍ عالق ولا يختفي إلا عند وضع المؤشر عليه مجدداً،
   لأن قاعدة hover تجعل حد الزر بنفس اللون فيذوب الإطار فيه. نعتمد على
   دلالات hover/active الموجودة ونمنع حلقات التركيز الافتراضية لكل الأزرار
   والعناصر التفاعلية حتى لا تبقى أي إشارة «محدد» عالقة بعد النقر. */
button:focus,
.btn-toolbar:focus,
.tool-btn:focus,
.frame:focus,
.draw-frame:focus,
.dropdown-item:focus,
.ctx-item:focus,
a:focus {
    outline: none;
}

/* [v4.8.6] منع نهائي لأي حلقة تركيز ملونة على أزرار التايملاين/شريط الأدوات —
   معها افتراضيات المتصفح (Firefox/etc) التي تُظهر حلقة ملونة بعد النقر وتبقى
   عالقة ولا تُزال إلا عند المرور. */
.timeline-panel button:focus,
.timeline-panel button:focus-visible,
.btn-toolbar:focus,
.btn-toolbar:focus-visible,
.tool-btn:focus,
.tool-btn:focus-visible,
.frame:focus,
.frame:focus-visible,
.draw-frame:focus,
.draw-frame:focus-visible,
.dropdown-item:focus,
.dropdown-item:focus-visible,
.ctx-item:focus,
.ctx-item:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Consistent separator dividers in headers */
.header div[style*="background: var(--border)"],
.header div[style*="background:#333"] {
    opacity: 0.6;
}