body, html { margin: 0; overflow: hidden; background: #f0f2f5; font-family: 'Inter', sans-serif; }

/* VIEWPORT & CANVAS */
#viewport { width: 100vw; height: 100vh; cursor: grab; overflow: hidden; }
#viewport:active { cursor: grabbing; }

#canvas { 
    width: 5000px; height: 5000px; 
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 50px 50px;
    position: relative; transform-origin: 0 0;
    touch-action: none; 
}

/* UI ELEMENTS */
.ui-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1000; }
.top-bar { position: absolute; top: 20px; left: 20px; display: flex; flex-direction: column; gap: 5px; pointer-events: auto; }
.logo { margin: 0; font-size: 1.5rem; color: #1e293b; font-weight: 900; }
#room-display { background: white; padding: 4px 8px; border-radius: 4px; border: 1px solid #cbd5e1; font-family: monospace; width: fit-content; }

.toolbar {
    position: absolute; left: 20px; top: 100px;
    background: white; padding: 8px; border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex; flex-direction: column; gap: 8px; pointer-events: auto;
}
.tool-btn { background: none; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 1.2rem; cursor: pointer; padding: 8px; transition: 0.2s; }
.tool-btn:hover { background: #f1f5f9; }
.divider { height: 1px; background: #e2e8f0; margin: 2px 0; }

.zoom-container { position: absolute; left: 20px; bottom: 40px; height: 150px; pointer-events: auto; }
input[type=range][orient=vertical] { writing-mode: bt-lr; -webkit-appearance: slider-vertical; width: 8px; height: 100%; }

/* NOTES */
.note {
    position: absolute; width: 200px; min-height: 140px;
    background: white; border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex; flex-direction: column;
    cursor: grab; user-select: none; transition: box-shadow 0.2s;
    z-index: 10; 
}
.note.selected { box-shadow: 0 0 0 2px #4f46e5; z-index: 100 !important; }

.del-btn {
    position: absolute; top: -10px; right: -10px;
    background: #ef4444; color: white; width: 24px; height: 24px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-weight: bold; font-size: 14px;
    opacity: 0; transition: 0.2s; pointer-events: auto;
}
.note:hover .del-btn { opacity: 1; }

.note-text { flex-grow: 1; padding: 15px; outline: none; font-size: 16px; color: #333; cursor: text; user-select: text; }
.note-tools { padding: 8px; display: flex; gap: 4px; justify-content: flex-end; background: rgba(0,0,0,0.02); border-radius: 0 0 8px 8px; }
.color-dot { width: 16px; height: 16px; border-radius: 50%; cursor: pointer; border: 1px solid rgba(0,0,0,0.1); }

/* SVG ARROWS */
#svg-layer { 
    width: 100%; height: 100%; 
    position: absolute; top: 0; left: 0; 
    z-index: 1; 
    pointer-events: none; /* Let clicks pass through empty space */
}
.arrow-group { pointer-events: auto; cursor: grab; }

.arrow-line { 
    stroke: #333; stroke-width: 3; fill: none; transition: stroke 0.2s; 
}
.arrow-group:hover .arrow-line { stroke: #4f46e5; }

/* Handles (Blue Dots) */
.arrow-handle { 
    fill: #4f46e5; r: 6; opacity: 0; cursor: crosshair; pointer-events: auto; 
}
.arrow-group:hover .arrow-handle { opacity: 1; }

/* Delete Button (Red X) */
.arrow-del-group { 
    opacity: 0; cursor: pointer; pointer-events: auto; transition: opacity 0.2s; 
}
.arrow-group:hover .arrow-del-group { opacity: 1; }