/* --- Comic Bubbles --- */
.speech-bubble, .thought-bubble, .whisper-bubble, .shout-bubble {
    padding: 15px;
    min-width: 50px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: #fff;
    color: #000;
    border: 2px solid #000;
    border-radius: 50%;
    line-height: 1.2;
    font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif; /* Fallback to comic font */
}

/* Speech Bubble (Standard) */
.speech-bubble {
    border-radius: 50%;
}
.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 20%;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #000 transparent;
    display: block;
    width: 0;
}
.speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 20%;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #fff transparent;
    display: block;
    width: 0;
    z-index: 1;
}

/* Thought Bubble (Cloud) */
.thought-bubble {
    border-radius: 50%;
    border: 2px solid #000;
}
/* Simplified thought tail */
.thought-bubble::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 20%;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 50%;
}
.thought-bubble::before {
    content: '';
    position: absolute;
    bottom: -25px;
    left: 15%;
    width: 6px;
    height: 6px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 50%;
}

/* Whisper Bubble (Dashed) */
.whisper-bubble {
    border-style: dashed;
    border-radius: 50%;
    background: #f9f9f9;
    color: #555;
    font-size: 0.9em;
}

/* Shout Bubble (Spiky) */
.shout-bubble {
    border: 3px solid #000;
    background: #fff;
    clip-path: polygon(
        0% 15%, 5% 10%, 10% 15%, 15% 5%, 20% 15%, 25% 5%, 30% 15%, 
        35% 0%, 40% 15%, 45% 5%, 50% 15%, 55% 0%, 60% 15%, 65% 5%, 
        70% 15%, 75% 5%, 80% 15%, 85% 0%, 90% 15%, 95% 5%, 100% 15%,
        100% 85%, 95% 95%, 90% 85%, 85% 95%, 80% 85%, 75% 95%, 70% 85%, 
        65% 95%, 60% 85%, 55% 95%, 50% 85%, 45% 95%, 40% 85%, 35% 95%, 
        30% 85%, 25% 95%, 20% 85%, 15% 95%, 10% 85%, 5% 95%, 0% 85%
    );
    /* Fallback border for no clip-path support or if clip-path hides border */
    /* Note: clip-path cuts off border. For a real spiky bubble with border, SVG is best. 
       For CSS only, we can use a jagged background or just a thick border. 
       Let's stick to a simpler spiky shape via border-image or just a standard box for now 
       if clip-path is too complex to border. 
       Let's try a simple approach: starburst shape is hard in pure CSS with border.
       We'll make it a jagged box. */
    clip-path: none;
    border-radius: 0;
    transform: rotate(-2deg);
    border-width: 3px;
    font-weight: bold;
    font-size: 1.1em;
}

/* Editor Specifics */
.draggable-element.locked {
    pointer-events: none; /* Prevent interaction */
    opacity: 0.7;
    filter: grayscale(1);
}
/* But we need to allow selection in list? Yes, list is separate. 
   If locked, we might want to prevent drag but allow selection via list?
   Or maybe just prevent drag/resize. */
.draggable-element.locked .resize-handle {
    display: none;
}

body {
    background: #f7f8fb;
    color: #14161a;
}

.navbar {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.navbar .nav-link {
    color: rgba(20, 22, 26, 0.82);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: rgba(20, 22, 26, 1);
}

.navbar .dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.navbar .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.15);
}

.focus-night {
    background: #0b0e14;
    color: #e7eaf0;
}

.focus-night .navbar,
.focus-night footer {
    display: none;
}

.focus-night .card {
    background: rgba(20, 24, 32, 0.9);
    color: #e7eaf0;
    border-color: rgba(255, 255, 255, 0.08);
}

.focus-night .form-control,
.focus-night .form-select {
    background: rgba(18, 20, 26, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e7eaf0;
}

.focus-night .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.9);
}