/* ============================================
   BPMN Touch Interaction Styles
   ============================================ */

/* --- Touch hit targets --- */
.touch-hit-target {
    fill: transparent;
    stroke: none;
    pointer-events: all;
    cursor: pointer;
}

/* --- Tap ripple --- */
.bpmn-tap-ripple {
    position: fixed;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    border-radius: 50%;
    background: rgba(66, 165, 245, 0.25);
    pointer-events: none;
    z-index: 9999;
    animation: bpmn-ripple-expand 0.4s ease-out forwards;
}

.bpmn-long-press-ripple {
    position: fixed;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.3);
    pointer-events: none;
    z-index: 9999;
    animation: bpmn-ripple-expand 0.5s ease-out forwards;
}

@keyframes bpmn-ripple-expand {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* --- Drag shadow --- */
.bpmn-touch-dragging {
    opacity: 0.7;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

/* --- Connection mode --- */
.bpmn-connection-source {
    animation: bpmn-glow-pulse 1.5s ease-in-out infinite;
}

@keyframes bpmn-glow-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 4px var(--nordic-selection-glow));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(66, 165, 245, 0.8));
    }
}

.bpmn-connection-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--mud-palette-primary, #42A5F5);
    color: white;
    font-size: 14px;
    font-weight: 500;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.bpmn-connection-cancel {
    padding: 4px 16px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    background: transparent;
    color: white;
    font-size: 13px;
    cursor: pointer;
}

.bpmn-connection-cancel:active {
    background: rgba(255, 255, 255, 0.15);
}

/* --- Context menu --- */
.bpmn-context-menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.bpmn-context-menu {
    position: fixed;
    min-width: 180px;
    background: var(--mud-palette-surface, #fff);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    overflow: hidden;
    padding: 4px 0;
}

.bpmn-context-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-primary, #1a2332);
    font-size: 14px;
    cursor: pointer;
    text-align: left;
}

.bpmn-context-menu-item:active {
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

.bpmn-context-menu-item--danger {
    color: var(--mud-palette-error, #C85A54);
}

.bpmn-context-menu-divider {
    height: 1px;
    margin: 4px 0;
    background: var(--mud-palette-divider, #E0E5EB);
}

/* --- Multi-select indicator --- */
.bpmn-multiselect-indicator {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 20px;
    background: var(--mud-palette-dark, #5A6A79);
    color: white;
    border-radius: 20px;
    font-size: 13px;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ============================================
   Touch device overrides (coarse pointer)
   ============================================ */
@media (pointer: coarse) {
    /* Enlarge connection ports for touch */
    .connection-port {
        r: 12;
        stroke-width: 3;
    }

    /* Ensure toolbar buttons are touch-friendly */
    .canvas-toolbar button {
        min-width: 44px;
        min-height: 44px;
    }

    /* Make element labels easier to tap */
    .element-label {
        font-size: 14px;
    }

    /* Enlarge properties panel toggle area */
    .properties-panel {
        min-width: 44px;
    }

    /* Disable hover effects on touch (avoid sticky hover) */
    .bpmn-element:hover {
        opacity: 1;
    }

    .connection-port {
        opacity: 0.6;
    }

    .bpmn-element.selected .connection-port {
        opacity: 1;
    }
}

/* --- Responsive: narrow touch screens --- */
@media (pointer: coarse) and (max-width: 768px) {
    .processmodel-container {
        grid-template-columns: auto 1fr;
        grid-template-rows: 1fr auto;
    }

    .properties-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 40vh;
        border-left: none;
        border-top: 1px solid var(--mud-palette-divider, #E0E5EB);
        border-radius: 16px 16px 0 0;
        z-index: 100;
        overflow-y: auto;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }

    .properties-panel.collapsed {
        max-height: 0;
        padding: 0;
    }

    .properties-panel.visible {
        width: 100%;
    }

    .canvas-toolbar {
        padding: 2px 4px;
        gap: 2px;
    }
}