/*
 * blob.css — the blob's window. The canvas ignores the pointer; only the invisible
 * handle that follows the body takes it, so scrolling keeps working everywhere else.
 */

.blob-card {
    border-radius: 20px;
    background: #fbfaf7;
    color: #18262b;
    box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(24, 38, 43, .12), 0 40px 70px -36px rgba(10, 30, 40, .55);
    overflow: hidden;
    animation: v4-rise .7s var(--v4-ease) both;
}

.blob-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(24, 38, 43, .1);
    background: linear-gradient(180deg, #f4f2ec, #ebe7de);
}
.blob-toolbar h2 { margin: 2px 0 0; font: 600 1.2rem var(--v4-font); }

.blob-file { position: relative; padding-left: 64px; color: #5f6d70; font: 500 .78rem var(--v4-mono); }
.blob-file::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 11px;
    height: 11px;
    margin-top: -5.5px;
    border-radius: 50%;
    background: #ff5f57;
    box-shadow: 18px 0 0 #febc2e, 36px 0 0 #28c840;
}

.blob-drop {
    flex: none;
    min-height: 40px;
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    background: #18262b;
    color: #fbfaf7;
    font: 500 .82rem var(--v4-mono);
    cursor: pointer;
}
.blob-drop:hover { background: #2b3e45; }

.blob-stage {
    position: relative;
    height: clamp(420px, 68vh, 720px);
    overflow: hidden;
    background: #fbfaf7;
}

.blob-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.blob-shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 22px;
    margin-bottom: -11px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(40, 20, 90, .34), rgba(40, 20, 90, 0));
    pointer-events: none;
    will-change: transform, opacity;
}

.blob-handle {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: grab;
    touch-action: none;
    will-change: transform;
}
.blob-handle.is-held { cursor: grabbing; }
.blob-handle:focus-visible { outline: 3px dashed #4a2fd0; outline-offset: 4px; }

.blob-missing {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 24px;
    color: #5f6d70;
    font: 500 .95rem var(--v4-mono);
    text-align: center;
}
.blob-missing[hidden] { display: none; }

.blob-controls {
    margin: 0;
    padding: 12px 18px;
    border-top: 1px solid rgba(24, 38, 43, .1);
    color: #5f6d70;
    font: 500 .8rem var(--v4-mono);
}
.blob-controls kbd {
    padding: 1px 6px;
    border-radius: 5px;
    background: #ebe7de;
    color: #18262b;
    font: inherit;
}

html[data-theme="night"] .blob-card { background: #141a2e; color: #eef1f8; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 70px -36px rgba(0, 0, 0, .8); }
html[data-theme="night"] .blob-toolbar { border-color: rgba(255, 255, 255, .1); background: linear-gradient(180deg, #1c2340, #171d35); }
html[data-theme="night"] .blob-file,
html[data-theme="night"] .blob-controls,
html[data-theme="night"] .blob-missing { color: #9aa4b8; }
html[data-theme="night"] .blob-drop { background: #eef1f8; color: #141a2e; }
html[data-theme="night"] .blob-drop:hover { background: #fff; }
html[data-theme="night"] .blob-stage { background: #0f1424; }
html[data-theme="night"] .blob-shadow { background: radial-gradient(closest-side, rgba(150, 110, 255, .4), rgba(150, 110, 255, 0)); }
html[data-theme="night"] .blob-handle:focus-visible { outline-color: #c8b8ff; }
html[data-theme="night"] .blob-controls { border-color: rgba(255, 255, 255, .1); }
html[data-theme="night"] .blob-controls kbd { background: #1c2340; color: #eef1f8; }

@media (max-width: 560px) {
    .blob-toolbar h2 { font-size: 1.02rem; }
    .blob-drop { padding: 8px 10px; font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .blob-card { animation: none; }
}