.logs-container {
    display: flex;
    flex-direction: column;
    background: var(--neutral-layer-1);
    height: 100%;
}

.logs-search-container {
    margin: 33px 8px 0 8px;
    flex-shrink: 0;
}

.console-container {
    flex: 1;
    margin: 8px;
    overflow: auto;
    color: var(--neutral-foreground-rest);
    font-family: 'Consolas', 'Courier New', 'Lucida Console', monospace;
    font-size: var(--font-size-small);
    line-height: 1.4;
}

.console-output {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    white-space: normal;  /* Add this to prevent inheriting pre-wrap behavior */
}

.console-entry {
    margin: 0 0 6px 0;
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    padding: 1px 0;
}

.console-entry:last-child {
    margin-bottom: 0;
}

.console-entry:hover {
    background: var(--neutral-fill-hover);
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.console-entry:focus-within,
.console-entry.selected {
    background: var(--neutral-fill-subtle-active);
    border-radius: 4px;
    outline: 1px solid var(--accent-stroke-control-default);
    outline-offset: -1px;
}

.log-timestamp {
    color: var(--neutral-foreground-2);
    user-select: text;
    white-space: nowrap;
    flex-shrink: 0;
}

.log-level {
    font-weight: 600;
    user-select: text;
    white-space: nowrap;
    flex-shrink: 0;
}

    .log-level .default {
        color: var(--neutral-foreground-3);
    }

    .log-level .info {
        color: color-mix(in srgb, var(--accent-foreground-rest) 80%, #4ec9b0);
    }

    .log-level .warning {
        color: color-mix(in srgb, var(--accent-foreground-rest) 80%, #ffa500);
    }

    .log-level .error {
        color: color-mix(in srgb, var(--accent-foreground-rest) 80%, #ff6b47);
    }

    .log-level .critical {
        color: color-mix(in srgb, var(--accent-foreground-rest) 80%, #ff4757);
    }

.log-property {
    color: var(--accent-foreground-rest);
    user-select: text;
    white-space: nowrap;
    flex-shrink: 0;
}

.console-output ::deep .log-match {
    background: var(--accent-fill-rest);
    color: var(--accent-foreground-rest);
    border-radius: 2px;
    padding: 0 1px;
    font-weight: 600;
}

.log-exception,
.log-message {
    user-select: text;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--neutral-foreground-rest);
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

.no-logs {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    color: var(--neutral-foreground-3);
    font-style: italic;
}

/* Text selection styling using Fluent UI variables */
.console-output ::selection {
    background: var(--accent-fill-rest);
    color: var(--accent-foreground-rest);
}

.console-output ::-moz-selection {
    background: var(--accent-fill-rest);
    color: var(--accent-foreground-rest);
}

/* Scrollbar styling using Fluent UI variables */
.console-container::-webkit-scrollbar {
    width: 6px;
}

.console-container::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--neutral-fill-rest) 30%, transparent);
    border-radius: 3px;
}

.console-container::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--neutral-fill-strong-rest) 80%, transparent);
    border-radius: 3px;
}

.console-container::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--neutral-fill-strong-hover) 80%, transparent);
}