/* ==========================================================================
   BUBBLE LIST
   ========================================================================== */

.bubble-list {
    display: flex;
    flex-direction: column;
    gap: 1vh;
}

.bubble-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 1vh;
    border-radius: .5vh;
}

.bubble-item:hover {
    background: rgba(0,0,0,.06);
}

/* ==========================================================================
   BUBBLE WORK
   ========================================================================== */

.bubble-work {
    position: absolute;
    inset: 0;
    z-index: 100;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: var(--color-bubbleWork);

    transform: translateX(100%);
    transition: transform .40s ease;
}

.bubble-work.open {
    transform: translateX(0);
}

/* ==========================================================================
   TOOLBAR
   ========================================================================== */

.bubble-toolbar {
    display: flex;
    align-items: center;
    gap: 1vh;
    flex: 0 0 auto;

    padding: 1vh 2vh;

    background: var(--color-whatContainer);
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* ==========================================================================
   CONTENT
   ========================================================================== */

.bubble-content {
    flex: 1;
    min-height: 0;

    overflow: auto;

    padding: 2vh;

    background: var(--color-work);
}