- var(--cyber-angle-size)), calc(100% - var(--cyber-angle-size)) 100%, var(--cyber-angle-size) 100%, 0 calc(100% - var(--cyber-angle-size))); position: relative; background-color: var(--color-background-opacity) !important; /* Code block background uses background opacity color */ } .markdown pre [class^="CodeBlockWrapper-"]::before { content: ""; position: absolute; top: 0; right: 0; width: 12px; height: 12px; border-top: 2px solid var(--color-cyber-accent); /* Code block corner uses main accent color */ border-right: 2px solid var(--color-cyber-accent); /* Code block corner uses main accent color */ z-index: 10; } .markdown pre [class^="CodeBlockWrapper-"]::after { content: ""; position: absolute; bottom: 0; left: 0; width: 12px; height: 12px; border-bottom: 2px solid var(--color-cyber-accent); /* Code block corner uses main accent color */ border-left: 2px solid var(--color-cyber-accent); /* Code block corner uses main accent color */ z-index: 10; } .markdown pre [class^="CodeHeader-"] { border-radius: 0 !important; /* Background based on dark/light mode variables */ background: linear-gradient(to bottom, rgba(var(--color-white-rgb), 0.08), rgba(var(--color-white-rgb), 0)), rgba(var(--color-black-rgb), 0.9); border-bottom: 1px solid var(--color-cyber-accent); /* Code header border uses main accent color */ margin-bottom: 0 !important; justify-content: center; color: var(--color-text-2); /* Code header text uses secondary text color */ padding: 8px 16px; position: relative; overflow: hidden; padding-top: calc(var(--cyber-angle-size) + 8px); padding-left: calc(var(--cyber-angle-size) + 40px); padding-right: calc(var(--cyber-angle-size) + 16px); } .markdown pre [class^="CodeHeader-"]::before { content: ' '; position: absolute; top: calc(var(--cyber-angle-size) + 4px); left: calc(var(--cyber-angle-size) + 12px); width: 12px; height: 12px; border-radius: 50%; /* Standard traffic light dots, can be customized if needed */ background: #fc625d; /* Red */ box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; /* Yellow, Green */ z-index: 1; } .markdown pre [class^="CodeContent-"] { background-color: transparent !important; border-radius: 0 !important; border-top: none !important; margin-top: 0 !important; padding: 16px; padding-bottom: calc(var(--cyber-angle-size) + 16px); padding-left: calc(var(--cyber-angle-size) + 16px); padding-right: calc(var(--cyber-angle-size) + 16px); } .markdown ul li::marker, .markdown ol li::marker { color: var(--color-cyber-accent); /* List markers use main accent color */ } .markdown hr { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--color-cyber-accent), transparent); /* HR gradient uses main accent color */ margin: 2rem 0; opacity: 0.5; position: relative; } .markdown hr::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; background-color: var(--color-cyber-accent); /* HR dot uses main accent color */ border-radius: 50%; box-shadow: 0 0 3px var(--shadow-cyber-glow-teal); /* HR dot shadow uses primary accent glow */ } .markdown table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.5rem 0; background-color: var(--color-background-opacity) !important; /* Table background uses background opacity color */ border: 1px solid var(--color-cyber-accent); /* Table border uses main accent color */ border-radius: var(--list-item-border-radius); overflow: hidden; box-shadow: var(--chat-customize-box-shadow); clip-path: polygon(0 var(--cyber-angle-size), var(--cyber-angle-size) 0, calc(100% - var(--cyber-angle-size)) 0, 100% var(--cyber-angle-size), 100% calc(100% - var(--cyber-angle-size)), calc(100% - var(--cyber-angle-size)) 100%, var(--cyber-angle-size) 100%, 0 calc(100% - var(--cyber-angle-size))); position: relative; } .markdown table::before { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-top: 2px solid var(--color-cyber-accent); /* Table corner uses main a