/* ============================================================================
 * DIALOG COMPONENT STYLES
 * Speech bubbles, character interactions, and messaging
 * ============================================================================ */

/* ========================================
 * DIALOG CONTAINER
 * Main dialog layout and positioning
 * ======================================== */

.dialog-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: var(--z-content);
}

.math-app-dialog-container {
    z-index: var(--z-content);
}

/* ========================================
 * DIALOG BUBBLE
 * Speech bubble styling and layout
 * ======================================== */

.math-app-dialog-bubble {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.dialog-bubble {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* ========================================
 * DIALOG TAIL
 * Speech bubble tail/pointer styling
 * ======================================== */

.math-app-dialog-tail {
    position: absolute;
    width: 0;
    height: 0;
    z-index: var(--z-elevated);
}

.math-app-dialog-tail-south {
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

.math-app-dialog-tail-north {
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

.math-app-dialog-tail-left {
    left: 50%;
    transform: translateX(-50%);
}

.math-app-dialog-tail-right {
    right: 50%;
    transform: translateX(50%);
}

/* ========================================
 * DIALOG TEXT
 * Text content styling within dialog bubbles
 * ======================================== */

.math-app-dialog-text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: pre-line;
    word-wrap: break-word;
    box-sizing: border-box;
}

.dialog-container .dialog-content,
.dialog-container .dialogue-content {
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    color: var(--color-dialog-text);
    text-align: center;
    font-weight: 500;
    line-height: 1.4;
    text-shadow: var(--shadow-sm);
    margin: 0;
    padding: 0;
}