.flow-event-console {

position: fixed;

left: 0;

right: 0;

bottom: 0;

height: 0;

background: #020617;

border-top:

1px solid var(--flow-border);

overflow: hidden;

transition:

height 0.25s ease;

z-index: 9997;

display: flex;

flex-direction: column;

}


/* OPEN STATE */

.event-console-open {

height: 240px;

}


/* HEADER */

.event-console-header {

display: flex;

justify-content: space-between;

align-items: center;

padding: 8px 14px;

background: #020617;

border-bottom:

1px solid var(--flow-border);

font-size: 13px;

font-weight: 600;

}


/* ACTION BUTTONS */

.event-console-actions {

display: flex;

gap: 8px;

}


.event-console-actions button {

background: var(--flow-bg-panel);

border:

1px solid var(--flow-border);

color: var(--flow-text-secondary);

padding:

4px 10px;

border-radius: 6px;

cursor: pointer;

font-size: 12px;

}


.event-console-actions button:hover {

background: var(--flow-accent);

color: white;

}


/* BODY */

.event-console-body {

flex: 1;

overflow-y: auto;

padding: 10px;

font-family:

ui-monospace,
SFMono-Regular,
Menlo,
monospace;

font-size: 12px;

}


/* EVENT ROW */

.event-row {

margin-bottom: 8px;

padding: 8px;

background: #020617;

border:

1px solid var(--flow-border);

border-radius: 6px;

}


/* TIMESTAMP */

.event-time {

color: var(--flow-warning);

font-size: 11px;

margin-bottom: 4px;

}


/* PAYLOAD */

.event-payload {

white-space: pre-wrap;

color: var(--flow-text-primary);

}


/* MOBILE OPTIMIZATION 📱 */

body[data-layout="mobile"]
.event-console-open {

height: 180px;

}