/* Greb Flow - Main Stylesheet */

/* Import JetBrains Mono font */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* Base styles */
body {
    margin: 0;
    padding: 0;
    font-family: 'JetBrains Mono', monospace;
    background-color: #A0A0A0;
    color: #ffffff;
}

/* Fade in animation for save notification */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* App container */
#app {
    width: 100vw;
    height: 100vh;
    background-color: #A0A0A0;
    font-family: 'JetBrains Mono', monospace;
}

/* React Flow background override */
.react-flow__background {
    background-color: #A0A0A0 !important;
}

/* React Flow node wrapper styling */
.react-flow__node {
    /* Remove all default styling from wrapper */
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.react-flow__node.selected {
    /* Don't override our custom node outlines */
}

/* Hide React Flow's default selection visuals (our custom nodes handle it) */
.react-flow__nodesselection-rect {
    display: none !important;
}

/* Highlight selected edges - white, same thickness */
.react-flow__edge.selected path,
.react-flow__edge.selected .react-flow__edge-path {
    stroke: #FFFFFF !important;
    stroke-width: 3 !important;
}

/* Edge z-index: above shadow, below ports */
.react-flow__edge {
    z-index: 5 !important;
    opacity: 0.9 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    padding-top: 0px !important;
    box-sizing: border-box !important;
    border-radius: 0px !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

/* React Flow edge label renderer */
.react-flow__edgelabel-renderer {
    opacity: 0 !important;
}

/* React Flow edge path */
.react-flow__edge-path {
    opacity: 0.91 !important;
}

/* React Flow edges SVG */
.react-flow__edges {
    opacity: 0.9 !important;
}

/* SVG elements within React Flow */
.react-flow svg {
    opacity: 1 !important;
}

/* Path elements within React Flow */
.react-flow path {
    opacity: 1 !important;
}

/* G elements within React Flow */
.react-flow g {
    opacity: 1 !important;
}

.react-flow__handle {
    z-index: 10 !important;
    width: 12px !important;
    height: 12px !important;
    border: 3px solid #000 !important;
    background: #fff !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Fix edge connection gap - position handles at the visual edge of the node */
/* For nodes with border-radius (display mode), the rendered content typically has padding (24px) */
/* So handles should be positioned to account for that visual padding */
.react-flow__node[style*="border-radius"] .react-flow__handle-left,
.react-flow__node[data-has-display="true"] .react-flow__handle-left {
    left: -6px !important;  /* Align handle center to the node edge */
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.react-flow__node[style*="border-radius"] .react-flow__handle-right,
.react-flow__node[data-has-display="true"] .react-flow__handle-right {
    right: -6px !important;  /* Align handle center to the node edge */
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.react-flow__node[style*="border-radius"] .react-flow__handle-top,
.react-flow__node[data-has-display="true"] .react-flow__handle-top {
    top: 21px !important;  /* 24px content padding - 3px (half handle) = 21px */
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.react-flow__node[style*="border-radius"] .react-flow__handle-bottom,
.react-flow__node[data-has-display="true"] .react-flow__handle-bottom {
    bottom: 21px !important;  /* 24px content padding - 3px (half handle) = 21px */
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Default positioning for nodes without border-radius (with padding) */
.react-flow__handle-left {
    left: -6px !important;  /* Align handle center to the node edge */
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.react-flow__handle-right {
    right: -6px !important;  /* Align handle center to the node edge */
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Adjust right handle placement for greb nodes */
.react-flow__node-greb .react-flow__handle-right {
    left: 151px !important;
    right: auto !important;
}

.react-flow__handle-top {
    top: 5px !important;  /* 8px padding - 3px (half handle) = 5px */
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.react-flow__handle-bottom {
    bottom: 5px !important;  /* 8px padding - 3px (half handle) = 5px */
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Group nodes should be behind edges */
.resizable-group-node {
    z-index: -1 !important;
}

/* More specific selector for React Flow group nodes */
.react-flow__node .resizable-group-node {
    z-index: -1 !important;
}

/* Even more specific - target the React Flow node wrapper containing group nodes */
.react-flow__node.reactflow-node {
    z-index: -1 !important;
}

/* Ensure selected nodes don't override edge z-index */
.react-flow__node.selected {
    z-index: auto !important;
}

/* Regular nodes that are selected should NOT go above edges */
.react-flow__node.selected:not(.react-flow__node-group) {
    z-index: 1 !important;  /* Below edges (z-index: 5) */
}

/* Ensure group nodes stay behind edges even when selected */
.react-flow__node.selected .resizable-group-node {
    z-index: -1 !important;
}

.react-flow__node-group.selected {
    z-index: -1 !important;
}

/* Thicker connection line during drag preview */
.react-flow__connection-line {
    stroke-width: 4 !important;
    stroke: #000000 !important;
}

/* Alternative: target the connection path specifically */
.react-flow__connection-path {
    stroke-width: 4 !important;
    stroke: #000000 !important;
}

/* Allow React Flow interactions while hiding visual effects */
.react-flow__node:hover,
.react-flow__node-default:hover,
.react-flow__node.selected:hover {
    /* Remove hover visual effects but keep interaction */
}

/* Custom node styling that overrides React Flow defaults */
.greb-custom-node {
    background-color: #FF0000 !important;
    color: #FFFFFF !important;
    padding: 20px !important;
    border-radius: 10px !important;
    border: 3px solid #000000 !important;
    width: 150px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 600 !important;
}

/* Default node styling */
.greb-default-node {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

/* Hide React Flow's default selection border/outline that appears around the node wrapper */
.react-flow__node.selected::before,
.react-flow__node.selected::after {
    display: none !important;
}

/* Remove React Flow's default focus outline */
.react-flow__node:focus,
.react-flow__node.selected:focus {
    outline: none !important;
}

/* Remove React Flow's selection box and rectangle */
.react-flow__nodesselection {
    display: none !important;
}

.react-flow__nodesselection-rect {
    display: none !important;
}

/* Let React Flow handle node positioning and interaction naturally */

/* Hide web nodes when display mode is enabled (overlay shows them instead) */
.react-flow__node-web[style*="opacity: 0"],
.react-flow__node-web[data-has-display="true"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-shadow: none !important;
}

/* Hide nodes when code mode is enabled (overlay shows them instead) */
/* Only hide if explicitly set to true, never if false */
.react-flow__node[data-has-code="true"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-shadow: none !important;
}

/* Hide nodes with opacity 0 when code mode is true (not false) */
.react-flow__node[style*="opacity: 0"][data-has-code="true"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-shadow: none !important;
}

/* Leaflet Map Cursor Fix */
.leaflet-container {
    cursor: default !important;
}

.leaflet-container.leaflet-grab {
    cursor: grab !important;
}

.leaflet-container.leaflet-grabbing {
    cursor: grabbing !important;
}

/* Ensure cursor resets after drag */
.leaflet-container.leaflet-grab *:not(.leaflet-control):not(.leaflet-control *) {
    cursor: grab !important;
}

.leaflet-container.leaflet-grabbing *:not(.leaflet-control):not(.leaflet-control *) {
    cursor: grabbing !important;
}

/* Reset cursor on map pane when not dragging */
.leaflet-pane,
.leaflet-map-pane {
    cursor: default !important;
}

.leaflet-container.leaflet-grab .leaflet-pane,
.leaflet-container.leaflet-grab .leaflet-map-pane {
    cursor: grab !important;
}

.leaflet-container.leaflet-grabbing .leaflet-pane,
.leaflet-container.leaflet-grabbing .leaflet-map-pane {
    cursor: grabbing !important;
}

/* Leaflet Controls - Brutalism Style */
.leaflet-control {
    background: rgba(245, 223, 77, 1) !important;
    border: 3px solid #000 !important;
    border-radius: 6px !important;
    box-shadow: -4px 4px 0px rgba(0,0,0,0.5) !important;
    font-family: 'JetBrains Mono', monospace !important;
    cursor: default !important;
}

.leaflet-bar {
    border: none !important;
    box-shadow: none !important;
}

.leaflet-bar a,
.leaflet-bar a:hover {
    background-color: rgba(245, 223, 77, 1) !important;
    border: 2px solid #000 !important;
    border-radius: 4px !important;
    color: #000 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 28px !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: -2px 2px 0px rgba(0,0,0,0.3) !important;
    transition: all 0.1s !important;
}

.leaflet-bar a:hover {
    background-color: rgba(255, 235, 100, 1) !important;
    box-shadow: -1px 1px 0px rgba(0,0,0,0.3) !important;
    transform: translate(-1px, 1px) !important;
}

.leaflet-bar a:active {
    box-shadow: 0px 0px 0px rgba(0,0,0,0.3) !important;
    transform: translate(0px, 0px) !important;
}

.leaflet-bar a.leaflet-disabled {
    background-color: rgba(200, 200, 200, 1) !important;
    color: #666 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.leaflet-control-layers {
    background: rgba(245, 223, 77, 1) !important;
    border: 3px solid #000 !important;
    border-radius: 6px !important;
    box-shadow: -4px 4px 0px rgba(0,0,0,0.5) !important;
    font-family: 'JetBrains Mono', monospace !important;
    padding: 8px !important;
}

.leaflet-control-layers-toggle {
    background-color: rgba(245, 223, 77, 1) !important;
    border: 2px solid #000 !important;
    border-radius: 4px !important;
    width: 36px !important;
    height: 36px !important;
    box-shadow: -2px 2px 0px rgba(0,0,0,0.3) !important;
}

.leaflet-control-layers-expanded {
    background: rgba(245, 223, 77, 1) !important;
    border: 3px solid #000 !important;
    border-radius: 6px !important;
    box-shadow: -4px 4px 0px rgba(0,0,0,0.5) !important;
    padding: 8px 12px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #000 !important;
}

.leaflet-control-layers-base label,
.leaflet-control-layers-overlays label {
    color: #000 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 0 !important;
}

.leaflet-control-layers-base label:hover,
.leaflet-control-layers-overlays label:hover {
    background-color: rgba(255, 235, 100, 0.3) !important;
}

.leaflet-control-layers-base input[type="radio"],
.leaflet-control-layers-base input[type="checkbox"],
.leaflet-control-layers-overlays input[type="radio"],
.leaflet-control-layers-overlays input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #000 !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    accent-color: #000 !important;
}

/* Hide all text and content inside hidden web nodes */
.react-flow__node-web[data-has-display="true"],
.react-flow__node-web[data-has-display="true"] *,
.react-flow__node-web[style*="opacity: 0"],
.react-flow__node-web[style*="opacity: 0"] *,
.react-flow__node-web[style*="visibility: hidden"],
.react-flow__node-web[style*="visibility: hidden"] * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    color: transparent !important;
    background: transparent !important;
    text-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Hide all text and content inside nodes with code mode enabled */
.react-flow__node[data-has-code="true"],
.react-flow__node[data-has-code="true"] *,
.react-flow__node[style*="opacity: 0"][data-has-code="true"],
.react-flow__node[style*="opacity: 0"][data-has-code="true"] *,
.react-flow__node[style*="visibility: hidden"][data-has-code="true"],
.react-flow__node[style*="visibility: hidden"][data-has-code="true"] * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    color: transparent !important;
    background: transparent !important;
    text-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* CRITICAL: Ensure nodes with code=false are ALWAYS visible - MUST come after all hiding rules */
/* This overrides any hiding styles that might have been applied */
.react-flow__node[data-has-code="false"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

.react-flow__node[data-has-code="false"] * {
    opacity: 1 !important;
    visibility: visible !important;
    display: revert !important;
    font-size: revert !important;
    line-height: revert !important;
    color: revert !important;
    background: revert !important;
    border: revert !important;
    box-shadow: revert !important;
    text-shadow: revert !important;
}

/* Hide React Flow handles inside hidden web nodes */
.react-flow__node-web[data-has-display="true"] .react-flow__handle,
.react-flow__node-web[style*="opacity: 0"] .react-flow__handle,
.react-flow__node-web[style*="visibility: hidden"] .react-flow__handle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide React Flow handles inside nodes with code mode enabled */
.react-flow__node[data-has-code="true"] .react-flow__handle,
.react-flow__node[style*="opacity: 0"][data-has-code="true"] .react-flow__handle,
.react-flow__node[style*="visibility: hidden"][data-has-code="true"] .react-flow__handle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Ensure handles are visible when code mode is off */
.react-flow__node[data-has-code="false"] .react-flow__handle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Hide any text nodes or content that might slip through */
.react-flow__node-web[data-has-display="true"] span,
.react-flow__node-web[data-has-display="true"] div,
.react-flow__node-web[data-has-display="true"] p,
.react-flow__node-web[data-has-display="true"] pre,
.react-flow__node-web[style*="opacity: 0"] span,
.react-flow__node-web[style*="opacity: 0"] div,
.react-flow__node-web[style*="opacity: 0"] p,
.react-flow__node-web[style*="opacity: 0"] pre {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Hide any text nodes or content in hidden code nodes */
.react-flow__node-code[data-has-display="true"] span,
.react-flow__node-code[data-has-display="true"] div,
.react-flow__node-code[data-has-display="true"] p,
.react-flow__node-code[data-has-display="true"] pre,
.react-flow__node-code[style*="opacity: 0"] span,
.react-flow__node-code[style*="opacity: 0"] div,
.react-flow__node-code[style*="opacity: 0"] p,
.react-flow__node-code[style*="opacity: 0"] pre {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Specifically hide pre tags with data content */
.react-flow__node-web[data-has-display="true"] pre,
.react-flow__node-web[style*="opacity: 0"] pre {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

/* Specifically hide pre tags in hidden code nodes */
.react-flow__node-code[data-has-display="true"] pre,
.react-flow__node-code[style*="opacity: 0"] pre {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

/* React Flow controls positioning */
.react-flow__controls {
    bottom: 10px !important;
    top: auto !important;
    left: 10px !important;
    background: #F9DB57 !important;
    border-radius: 7.53px !important;
    outline: 4px black solid !important;
    box-shadow: -4.108029365539551px 6.162043571472168px 0px black !important;
    padding: 4px !important;
}

/* Style individual control buttons */
.react-flow__controls button {
    background: transparent !important;
    border: none !important;
    color: #000000 !important;
    font-weight: 600 !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'JetBrains Mono', monospace !important;
}

.react-flow__controls button:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 3px !important;
}

.react-flow__controls button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* React Flow minimap positioning */
.react-flow__minimap {
    bottom: 10px !important;
    left: 10px !important; /* Moved to bottom-left corner */
    right: auto !important;
    border-radius: 7.53px !important;
    outline: 2px black solid !important;
    box-shadow: -2px 3px 0px black !important;
}

/* Ollama chat send button styling - ensure mint green background */
.ollama-chat-send-button {
    background-color: rgba(189, 244, 216, 1) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    width: 50px !important;
    height: 50px !important;
}

/* Make send button icon white */
.ollama-chat-send-button img {
    filter: invert(1) !important;
    padding: 0 !important;
    border: 4px solid #000 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 4px 4px 0px #000 !important;
    transition: none !important;
}

/* Greb icon styling */
.greb-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1001;
    cursor: pointer;
    width: 80px;
    height: 80px;
    transition: transform 0.2s ease;
}

.greb-icon:hover {
    transform: scale(1.1);
}

.greb-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* Custom node styles */
.greb-node {
    padding: 12px;
    border-radius: 8px;
    min-width: 120px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.greb-node--default {
    border: 2px solid #555;
    background: #1a1a1a;
    color: #ffffff;
}

.greb-node--pizza {
    border: 2px solid #ff6b35;
    background: #1a1a1a;
    color: #ffffff;
    min-width: 140px;
}

.greb-node__emoji {
    font-size: 20px;
}

.greb-node__label {
    font-weight: 600;
    color: #ff6b35;
    margin-top: 4px;
}

/* Graph indicator */
.greb-graph-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(26, 26, 26, 0.95);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    font-family: 'JetBrains Mono', monospace;
    z-index: 1000;
    border: 1px solid #555;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Grid and background customization */
.greb-canvas {
    width: 100%;
    height: 100vh;
}

/* Utility classes */
.greb-text-mono {
    font-family: 'JetBrains Mono', monospace;
}

.greb-bg-dark {
    background-color: #2a2a2a;
}

.greb-text-light {
    color: #ffffff;
}

.greb-border-subtle {
    border: 1px solid #555;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .react-flow__controls {
        bottom: 5px !important;
        left: 5px !important;
        top: auto !important;
    }
    
    .greb-graph-indicator {
        top: 5px;
        right: 5px;
        font-size: 12px;
        padding: 6px 10px;
    }
    
    .greb-node {
        padding: 10px;
        min-width: 100px;
    }
}

/* Dark theme scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* Omnibar suggestion scrollbar — warm tones to match yellow background */
.omnibar-suggestions-scroll::-webkit-scrollbar {
    width: 6px;
}
.omnibar-suggestions-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.omnibar-suggestions-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
.omnibar-suggestions-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

/* Markdown content styles for chat display */
.markdown-content {
    font-size: 14px;
    line-height: 1.7;
    word-break: break-word;
}

.markdown-content > *:first-child {
    margin-top: 0 !important;
}

.markdown-content > *:last-child {
    margin-bottom: 0 !important;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    font-weight: 700;
    margin-top: 1em;
    margin-bottom: 0.5em;
    line-height: 1.2;
}

.markdown-content h1 { font-size: 1.5em; }
.markdown-content h2 { font-size: 1.3em; }
.markdown-content h3 { font-size: 1.1em; }

.markdown-content p {
    margin: 0.25em 0;
}

.markdown-content p:first-child {
    margin-top: 0;
}

.markdown-content p:last-child {
    margin-bottom: 0;
}

.markdown-content strong,
.markdown-content b {
    font-weight: 700 !important;
    font-style: normal;
}

.markdown-content p strong,
.markdown-content p b {
    font-weight: 700 !important;
}

.markdown-content em,
.markdown-content i {
    font-style: italic;
}

.markdown-content code {
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
}

.markdown-content pre {
    background: rgba(0, 0, 0, 0.1);
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.5em 0;
}

.markdown-content pre code {
    background: transparent;
    padding: 0;
}

.markdown-content ul,
.markdown-content ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.markdown-content li {
    margin: 0.25em 0;
}

.markdown-content blockquote {
    border-left: 3px solid rgba(0, 0, 0, 0.2);
    padding-left: 1em;
    margin: 0.5em 0;
    font-style: italic;
}

.markdown-content a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.3);
}

.markdown-content hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    margin: 1em 0;
}

/* Enable text selection on display content (exclude form elements) */
[data-cursor-element-id]:not(textarea):not(input):not(button) {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    cursor: text !important;
}

/* Ensure display overlay content is selectable (exclude form elements) */
div[style*="pointer-events: auto"] {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

div[style*="pointer-events: auto"] *:not(textarea):not(input):not(button) {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

/* Ensure textareas and inputs work properly in display nodes */
.display-node-container textarea, 
.display-node-container input, 
.display-node-container button,
.display-node-container a {
    pointer-events: auto !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
}

textarea, input[type="text"], input[type="search"] {
    user-select: auto !important;
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    cursor: text !important;
    pointer-events: auto !important;
}

/* Ollama chat send button baseline styling */
.ollama-chat-send-button {
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    background: rgba(189, 244, 216, 1) !important;
    color: #000 !important;
    border: 4px solid #000 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    box-shadow: 4px 4px 0px #000 !important;
    cursor: pointer !important;
}

/* ── Greb Markdown / RichText prose styles ──────────────────────────────── */
.greb-markdown, .greb-richtext {
  /* Links */
  a { color: #6b8cff; text-decoration: underline; }
  a:hover { color: #9bb0ff; }

  /* Bold */
  strong, b { font-weight: 700; }

  /* Italic */
  em, i { font-style: italic; }

  /* Headings */
  h1,h2,h3,h4 { font-weight: 700; line-height: 1.3; margin: 0.6em 0 0.3em; }
  h1 { font-size: 1.4em; }
  h2 { font-size: 1.2em; }
  h3 { font-size: 1.05em; }

  /* Paragraphs */
  p { margin: 0 0 0.7em; }
  p:last-child { margin-bottom: 0; }

  /* Block-quote */
  blockquote {
    margin: 0.5em 0;
    padding: 0.4em 0.8em;
    border-left: 3px solid rgba(160,130,255,0.5);
    font-style: italic;
    opacity: 0.85;
  }

  /* Inline code */
  code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.88em;
    background: rgba(255,255,255,0.1);
    padding: 1px 4px;
    border-radius: 3px;
  }
}

/* Drop-cap: first letter of the first paragraph, opt-in via --drop-cap:1 */
.greb-markdown[style*="--drop-cap: 1"] p:first-of-type::first-letter,
.greb-richtext[style*="--drop-cap: 1"] p:first-of-type::first-letter {
  float: left;
  font-size: 3.2em;
  line-height: 0.82;
  margin: 0.06em 0.07em 0 0;
  font-weight: 700;
  color: #a08cff;
}