src/components/p5/p5-with-editor.scss

.p5-with-editor {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  border: 2px solid #2d2d2d;
  
  @media (max-width: 768px) {
    flex-direction: column;
  }

  .editor-panel {
    width: 40%;
    height: 100%;
    border-right: 1px solid #2d2d2d;
    background: #1e1e1e;
    position: relative;
    
    @media (max-width: 768px) {
      width: 100%;
      height: 50%;
      border-right: none;
      border-bottom: 1px solid #2d2d2d;
    }
    
    .resize-handle {
      position: absolute;
      right: -5px;
      top: 0;
      bottom: 0;
      width: 10px;
      cursor: col-resize;
      z-index: 10;
      
      @media (max-width: 768px) {
        right: 0;
        top: auto;
        bottom: -5px;
        width: 100%;
        height: 10px;
        cursor: row-resize;
      }
      
      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }
    }
    
    .sending-indicator {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: #1f94ff;
      color: white;
      padding: 8px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
      z-index: 20;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 10px rgba(31, 148, 255, 0.4);
      animation: slideInRight 0.3s ease-out, pulseBlue 2s infinite;
    }
    
    .animation-indicator {
      position: absolute;
      top: 10px;
      left: 10px;
      background-color: #0d9c53;
      color: white;
      padding: 8px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
      z-index: 20;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 10px rgba(13, 156, 83, 0.4);
      animation: slideInLeft 0.3s ease-out, pulseGreen 2s infinite;
      
      svg {
        animation: pulse 1.5s ease infinite;
      }
    }
  }

  .sketch-panel {
    flex: 1;
    height: 100%;
    position: relative;
    min-width: 0;
    
    @media (max-width: 768px) {
      height: 50%;
    }
    
    .sketch-container {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background: #000;
      overflow: hidden;
      pointer-events: auto;

      canvas {
        display: block !important;
        max-width: 100% !important;
        max-height: 100% !important;
        position: relative !important;
        margin: auto;
        object-fit: contain;
        pointer-events: auto;
      }
      
      // Fix for p5.js accessibility tooltips
      canvas[data-testid],
      canvas#defaultCanvas0,
      .p5-managed-canvas {
        &::before,
        &::after {
          display: none !important;
          content: none !important;
        }
      }
    }
  }
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes pulseBlue {
  0% { box-shadow: 0 0 5px rgba(31, 148, 255, 0.4); }
  50% { box-shadow: 0 0 15px rgba(31, 148, 255, 0.7); }
  100% { box-shadow: 0 0 5px rgba(31, 148, 255, 0.4); }
}

@keyframes pulseGreen {
  0% { box-shadow: 0 0 5px rgba(13, 156, 83, 0.4); }
  50% { box-shadow: 0 0 15px rgba(13, 156, 83, 0.7); }
  100% { box-shadow: 0 0 5px rgba(13, 156, 83, 0.4); }
}

@keyframes slideInRight {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInLeft {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes ellipsis {
  0% { content: '.'; }
  33% { content: '..'; }
  66% { content: '...'; }
  100% { content: '.'; }
}

// Editor line highlighting
.current-line-highlight {
  background-color: rgba(13, 156, 83, 0.1) !important;
  border-left: 2px solid #0d9c53 !important;
}

.current-line-glyph {
  background-color: #0d9c53;
  width: 4px !important;
  margin-left: 3px;
}

// Enhance cursor visibility during animation
:global(.monaco-editor .cursor) {
  transition: all 0.1s ease;
}

// Add a subtle typing sound effect visual cue
@keyframes cursorPulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}