/*
 * ServiceNow Chat IDE styles
 * Extracted from Modules/ServiceNowMcp/Components/ServiceNowChatPage.razor.
 * Kept as a global stylesheet (not scoped .razor.css) because the component
 * relies on styling MudBlazor popover content (project/instance/branch menus)
 * which MudBlazor renders at the document root, outside this component's DOM
 * subtree — scoped CSS (even with ::deep) cannot reach portaled popovers.
 * All selectors are .sn-* prefixed to avoid collisions with other pages.
 */

.sn-chat-ide {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 118px);
    overflow: hidden;
    background: var(--mud-palette-background);
    position: relative;
}

/* ─── Loading Overlay (shown until workspace state is restored) ─── */
.sn-chat-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background);
}

.sn-chat-loading-text {
    color: var(--mud-palette-text-secondary);
}

.sn-chat-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    min-height: 0;
}

/* ─── Sidebar Panel ─── */
.sn-chat-sidebar-panel {
    width: 260px;
    flex-shrink: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.2s ease, border-right-width 0.2s ease;
}

.sn-chat-sidebar-panel.is-collapsed {
    width: 0;
    border-right-width: 0;
}

/* ─── Main + Explorer Layout ─── */
.sn-chat-main-wrap {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sn-explorer-wrap {
    flex-shrink: 0;
    height: 100%;
    overflow: hidden;
    border-left: 1px solid var(--mud-palette-lines-default);
    resize: horizontal;
    direction: rtl; /* puts the resize handle on the LEFT edge */
    min-width: 200px;
    max-width: 600px;
}

.sn-explorer-wrap > * {
    direction: ltr; /* restore content direction */
}

.sn-explorer-wrap.is-collapsed {
    width: 0 !important;
    min-width: 0;
    border-left-width: 0;
    resize: none;
}

/* ─── Chat Main Area ─── */
.sn-chat-main {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
}

/* ─── Top Bar ─── */
.sn-chat-topbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
    min-height: 40px !important;
    padding: 0 4px;
    gap: 2px;
}

.sn-chat-topbar .mud-icon-button {
    width: 28px;
    height: 28px;
    padding: 4px;
}

.sn-chat-topbar .mud-icon-button .mud-icon-root {
    font-size: 18px;
}

.sn-chat-topbar .mud-input-control {
    margin: 0 !important;
}

.sn-chat-topbar .mud-input.mud-input-outlined:not(.mud-input-multiline) .mud-input-slot {
    min-height: 30px;
    padding: 3px 8px !important;
    font-size: 0.8rem !important;
}

.sn-chat-topbar .mud-input.mud-input-outlined:not(.mud-input-multiline) .mud-input-adornment {
    margin-top: 0 !important;
}

/* ─── Workflow Guide Banner ─── */
.sn-workflow-guide-wrap {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
}

/* ─── Source Control Drawer Tabs ─── */
.sn-sc-tabs {
    height: 100%;
}
.sn-sc-tabs .mud-tabs-toolbar {
    background: transparent !important;
}
.sn-sc-tabs .mud-tab {
    min-width: auto;
    padding: 6px 14px;
    font-size: 0.8rem;
    text-transform: none;
}
.sn-sc-tabs .mud-tabs-panels {
    height: calc(100% - 36px);
    overflow-y: auto;
}

.sn-chat-topbar .mud-input-outlined .mud-input-outlined-border {
    top: 0 !important;
}

.sn-project-selector-wrap {
    display: flex;
    align-items: center;
}

.sn-project-menu-trigger {
    margin: 0 !important;
    min-height: 30px;
    height: 30px;
    padding: 0 8px !important;
    text-transform: none !important;
    border-radius: var(--mud-default-borderradius) !important;
    justify-content: flex-start;
}

.sn-project-menu-trigger .mud-button-label {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    width: 100%;
}

.sn-project-menu-trigger .mud-button-end-icon {
    margin-left: 4px;
    margin-right: 0;
}

.sn-project-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    width: 100%;
}

.sn-project-option-main {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.sn-project-name {
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}

.sn-project-scope {
    font-size: 0.68rem;
    opacity: 0.6;
    white-space: nowrap;
}

.sn-project-status-chip {
    font-size: 0.64rem !important;
    height: 16px !important;
    line-height: 16px !important;
    padding: 0 4px !important;
    margin: 0 !important;
}

.sn-status-chip {
    font-size: 0.6875rem !important;
    height: 20px !important;
    border-radius: var(--mud-default-borderradius) !important;
    font-weight: 500 !important;
    padding: 0 6px !important;
    margin-left: 6px;
}

.sn-connection-indicator {
    display: flex;
    align-items: center;
    padding: 0 4px;
}

.sn-connection-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    transition: background 0.3s;
}

.sn-connection-dot.online {
    background: var(--mud-palette-success);
    box-shadow: 0 0 4px var(--mud-palette-success);
}

.sn-connection-dot.offline {
    background: var(--mud-palette-error);
}

.sn-app-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ─── Editor Tabs ─── */
.sn-editor-tabs {
    display: flex;
    align-items: center;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
    min-height: 36px;
    padding: 0 4px;
}

.sn-tabs-scroll {
    display: flex;
    align-items: center;
    overflow-x: auto;
    flex: 1 1 0;
    min-width: 0;
    scrollbar-width: none;
}

.sn-tabs-scroll::-webkit-scrollbar { display: none; }

.sn-tabs-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 2px;
}

.sn-tab {
    display: flex;
    align-items: center;
    padding: 4px 8px 4px 12px;
    font-size: 0.8125rem;
    border-right: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
    user-select: none;
    position: relative;
    white-space: nowrap;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.sn-tab:hover {
    opacity: 1;
    background: var(--mud-palette-background-gray);
}

.sn-tab.active {
    opacity: 1;
    background: var(--mud-palette-background);
    border-bottom: 2px solid var(--mud-palette-primary);
}

.sn-tab-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sn-tab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    margin-left: 6px;
    flex-shrink: 0;
}

.sn-tab-close {
    margin-left: 4px;
    padding: 2px !important;
    min-width: 0 !important;
    width: 18px !important;
    height: 18px !important;
    opacity: 0;
    transition: opacity 0.15s;
}

.sn-tab-close .mud-icon-root { font-size: 14px !important; }

.sn-tab:hover .sn-tab-close,
.sn-tab.active .sn-tab-close { opacity: 0.6; }

.sn-tab-close:hover { opacity: 1 !important; }

/* ─── Tab Context Menu ─── */
.sn-tab-context-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: transparent;
}

.sn-tab-context-menu {
    border-radius: 6px;
    overflow: hidden;
}

.sn-tab-context-menu .mud-list-item {
    cursor: pointer;
    padding: 5px 14px;
    font-size: 0.8125rem;
    line-height: 1.4;
}
.sn-tab-context-menu .mud-list-item .mud-typography {
    font-size: inherit !important;
}

.sn-tab-context-menu .mud-list-item:hover {
    background: var(--mud-palette-action-default-hover);
}

/* ─── Tab Content ─── */
.sn-tab-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sn-tab-content-editor {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.sn-tab-content-output {
    flex: 0 0 35%;
    min-height: 120px;
    max-height: 60%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--mud-palette-lines-default);
    resize: vertical;
}

.sn-chat-tab-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.sn-editor-tab-body {
    height: 100%;
    width: 100%;
}

/* ─── Doc Content (rendered markdown) ─── */
.sn-doc-content {
    height: 100%;
    overflow-y: auto;
    padding: 24px 32px;
    font-size: 0.875rem;
    line-height: 1.6;
}

.sn-doc-content .sn-docs-markdown ::deep h1 { font-size: 1.75rem; margin-top: 0; margin-bottom: 16px; border-bottom: 1px solid var(--mud-palette-divider); padding-bottom: 8px; }
.sn-doc-content .sn-docs-markdown ::deep h2 { font-size: 1.35rem; margin-top: 28px; margin-bottom: 12px; }
.sn-doc-content .sn-docs-markdown ::deep h3 { font-size: 1.15rem; margin-top: 20px; margin-bottom: 8px; }
.sn-doc-content .sn-docs-markdown ::deep pre {
    background: var(--mud-palette-background-gray);
    border-radius: 6px;
    padding: 14px 16px;
    overflow-x: auto;
    font-size: 0.8125rem;
    line-height: 1.5;
}
.sn-doc-content .sn-docs-markdown ::deep code {
    font-family: 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.8125rem;
}
.sn-doc-content .sn-docs-markdown ::deep p code {
    background: var(--mud-palette-background-gray);
    padding: 1px 5px;
    border-radius: 3px;
}
.sn-doc-content .sn-docs-markdown ::deep table {
    border-collapse: collapse;
    width: 100%;
    margin: 12px 0;
    font-size: 0.8125rem;
}
.sn-doc-content .sn-docs-markdown ::deep th,
.sn-doc-content .sn-docs-markdown ::deep td {
    border: 1px solid var(--mud-palette-divider);
    padding: 6px 12px;
    text-align: left;
}
.sn-doc-content .sn-docs-markdown ::deep th {
    background: var(--mud-palette-background-gray);
    font-weight: 600;
}
.sn-doc-content .sn-docs-markdown ::deep a {
    color: var(--mud-palette-primary);
}
.sn-doc-content .sn-docs-markdown ::deep blockquote {
    border-left: 3px solid var(--mud-palette-primary);
    margin: 12px 0;
    padding: 4px 16px;
    background: rgba(128,128,128,0.04);
}
.sn-doc-content .sn-docs-markdown ::deep ul, .sn-doc-content .sn-docs-markdown ::deep ol {
    padding-left: 24px;
}

/* ─── File Explorer Panel ─── */
.sn-file-explorer-panel {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
}

.sn-file-explorer-header {
    display: flex;
    align-items: center;
    padding: 4px 8px 4px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    min-height: 36px;
    flex-shrink: 0;
    background: var(--mud-palette-surface);
}

.sn-file-explorer-tree {
    flex: 1;
    overflow-y: auto;
}

/* ─── Status Bar ─── */
.sn-chat-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 12px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    flex-shrink: 0;
    min-height: 24px;
}

.sn-chat-statusbar .mud-typography { color: inherit !important; }
.sn-chat-statusbar .mud-icon-root { color: inherit !important; }

.sn-statusbar-left, .sn-statusbar-right {
    display: flex;
    align-items: center;
}

/* ─── Splitter Theming ─── */
.sn-chat-ide .rz-splitter .rz-splitter-bar {
    background: var(--mud-palette-lines-default);
}

.sn-chat-ide .rz-splitter .rz-splitter-bar:hover,
.sn-chat-ide .rz-splitter .rz-splitter-bar:active {
    background: var(--mud-palette-primary);
}

.sn-chat-ide .rz-splitter-bar-vertical {
    height: 4px !important;
}

.sn-chat-ide .rz-splitter-bar-horizontal {
    width: 4px !important;
}

.sn-settings-drawer-body {
    height: calc(100% - 56px);
    overflow-y: auto;
    overflow-x: hidden;
}