@import url('root.css');

#layer-content {
overflow-y: auto;
height: var(--height-85vh);
margin-bottom: var(--margin-bottom-5px);
}

.layer-item {
display: flex;
align-items: center;
padding: 3px 5px;
border-bottom: 1px solid var(--layer-separator);
transition: background-color 0.15s ease;
cursor: pointer;
gap: 4px;
}

.layer-item:hover {
background-color: var(--layer-hover-bg) !important;
}

.layer-item.layer-active {
background-color: var(--layer-active-bg) !important;
border-left: 3px solid var(--layer-active-border);
}

.layer-preview {
width: var(--layer-preview-width);
height: var(--layer-preview-height);
min-width: var(--layer-preview-width);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: var(--layer-preview-bg);
border: 1px solid var(--layer-preview-border);
border-radius: var(--fjm-button-border-radius);
}

.layer-details {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}

.layer-name {
font-size: var(--font-size-base);
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: var(--textarea-border-radius);
padding: 1px 4px;
background-color: var(--layer-name-bg);
border: 1px solid var(--layer-name-border);
}

.layer-name:focus {
border-color: var(--layer-name-focus-border);
outline: none;
}

.layer-buttons {
display: flex;
flex-wrap: wrap;
gap: 0;
align-items: center;
margin: 0;
}

#layer-content .layer-buttons button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
margin-right: 3px;
border: 1px solid var(--layer-btn-border);
background: var(--layer-btn-bg);
color: var(--text-color-B);
cursor: pointer;
border-radius: var(--fjm-button-border-radius);
transition: background-color 0.15s;
font-size: 10px;
}

.layer-buttons button:hover {
background-color: var(--layer-btn-hover);
}

.layer-buttons button .material-icons {
font-size: 13px;
}

.layer-buttons .delete-layer-button {
color: var(--text-color-B);
opacity: 0.6;
font-size: 12px;
font-weight: bold;
}

.layer-buttons .delete-layer-button:hover {
background-color: var(--layer-btn-danger-hover);
opacity: 1;
color: #ff6b6b;
}

.layer-btn-separator {
width: 1px;
height: 14px;
background-color: var(--layer-separator);
margin: 0 2px;
}

.layer-action-bar{
display:flex;
flex-wrap:wrap;
gap:4px;
padding-top:2px;
}

#layer-content .layer-action-bar .layer-action-btn{
display:inline-flex;
align-items:center;
gap:2px;
padding:2px 4px;
margin:0;
border:1px solid var(--layer-btn-border);
background:var(--layer-btn-bg);
color:var(--text-color-B);
cursor:pointer;
border-radius:var(--fjm-button-border-radius);
font-size:10px;
white-space:nowrap;
line-height:1;
width:auto;
height:auto;
}

.layer-action-btn .material-icons{
font-size:12px;
}

.layer-action-btn:hover{
background-color:var(--layer-btn-hover);
}

.layer-action-sep{
width:1px;
height:14px;
background-color:var(--layer-separator);
margin:0 2px;
align-self:center;
}

.layer-item-nested {
border-left: 2px solid var(--layer-nested-border);
}

#layer-panel {
min-width: var(--min-width-layer-panel);
max-width: var(--max-width-layer-panel);
flex: var(--flex-layer-panel);
}

.ai-task-indicators {
display:flex;
flex-wrap:wrap;
gap:2px;
padding:1px 0;
}

.ai-task-indicator {
display:inline-flex;
align-items:center;
gap:2px;
padding:1px 4px;
border-radius:var(--fjm-button-border-radius);
font-size:10px;
line-height:1.2;
white-space:nowrap;
}

.ai-task-running {
background:rgba(40,167,69,0.2);
border:1px solid rgba(40,167,69,0.5);
color:#28a745;
}

.light-mode .ai-task-running {
background:rgba(40,167,69,0.15);
color:#1e7e34;
}

.ai-task-waiting {
background:rgba(255,193,7,0.2);
border:1px solid rgba(255,193,7,0.5);
color:#ffc107;
}

.light-mode .ai-task-waiting {
background:rgba(255,193,7,0.15);
color:#d39e00;
}

.ai-task-dot {
display:inline-block;
width:8px;
height:8px;
border-radius:50%;
background:currentColor;
opacity:0.6;
}

.ai-task-running .ai-task-dot {
width:10px;
height:10px;
background:transparent;
border:2px solid currentColor;
border-top-color:transparent;
animation:ai-spin 0.8s linear infinite;
opacity:1;
}

@keyframes ai-spin {
to { transform:rotate(360deg); }
}

.ai-task-text {
font-weight:bold;
}

.ai-task-cancel {
cursor:pointer;
font-size:9px;
color:#ff6b6b;
font-weight:bold;
margin-left:2px;
}

.ai-task-cancel:hover {
color:#ff3333;
}