/* Styles for Live Event Cards */
.event-cards-container {
    width: 90%; 
    max-width: 900px; 
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px; 
}

.event-card {
    background-color: #fff; 
    border: 1px solid #e1e8ed; 
    border-radius: 8px;
    padding: 15px;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.event-card h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #14171a; 
}

.event-card p {
    margin: 4px 0;
    font-size: 0.95em;
    color: #5b7083; 
}

.event-card p strong {
    color: #14171a;
}

.event-card pre {
    background-color: #f5f8fa;
    padding: 10px;
    border-radius: 4px;
    font-size: 0.85em;
    white-space: pre-wrap; 
    word-break: break-all;
    max-height: 200px; 
    overflow-y: auto;   
}

.event-card small {
    font-size: 0.8em;
    color: #8899a6; 
}

/* Specific card type styling */
.event-card-system {
    background-color: #e6f3ff; 
    border-left: 5px solid #1d9bf0;
}

.event-card-tweet-create {
    border-left: 5px solid #17bf63; 
}

.event-card-tweet-delete {
    border-left: 5px solid #e0245e; 
}

.event-card-favorite {
    border-left: 5px solid #ffad1f; 
}

.event-card-follow {
    border-left: 5px solid #1da1f2; 
}

.event-card-unfollow {
    border-left: 5px solid #aab8c2; 
}

.event-card-mute {
    border-left: 5px solid #f58ea8; 
}

.event-card-unmute {
    border-left: 5px solid #7857f3; 
}

.event-card-replay-status {
    border-left: 5px solid #6c757d; 
    background-color: #f8f9fa; 
}

/* DM Event Styling */
.event-card-dm-received {
    border-left: 5px solid #8A2BE2; /* BlueViolet */
    background-color: #f3e8ff; /* Light lavender background */
}

.event-card-dm-sent {
    border-left: 5px solid #A52A2A; /* Brown */
    background-color: #fff0f0; /* Light pink/brown background */
}

.event-card-dm-typing {
    border-left: 5px solid #778899; /* LightSlateGray */
    background-color: #f0f8ff; /* AliceBlue background */
}

.event-card-dm-read-receipt {
    border-left: 5px solid #FFD700; /* Gold */
    background-color: #fffacd; /* LemonChiffon background */
}

/* Layout for Live Events Tab (Cards + Instructions) */
.live-events-layout-container {
    display: flex;
    flex-direction: row;
    width: 100%; 
    gap: 20px; 
    margin-top: 15px;
}

#live-events-container.event-cards-container {
    flex-grow: 3; 
    flex-basis: 0; 
    max-width: none; 
    width: auto; 
    border-right: 1px solid #ccd6dd; 
    padding-right: 10em; 
    padding-left: 10em; 
}

.instructions-panel {
    flex-grow: 1; 
    flex-basis: 0; 
    background-color: #f5f8fa; 
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e1e8ed;
    text-align: left;
    height: fit-content; 
    overflow-y: auto; 
    max-height: 70vh; 
}

.instructions-panel h4 {
    margin-top: 0;
    color: #14171a;
}

.instructions-panel h5 {
    margin-top: 15px;
    margin-bottom: 5px;
    color: #14171a;
}

.instructions-panel p {
    font-size: 0.9em;
    line-height: 1.5;
    color: #5b7083;
    margin-bottom: 10px;
}

.instructions-panel code {
    background-color: #e1e8ed;
    padding: 2px 5px;
    border-radius: 4px;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 0.9em;
}

.instructions-panel pre.code-block-value {
    white-space: pre-wrap; 
    word-break: break-all;
    margin-top: 5px;
    margin-bottom: 10px;
}

.instructions-panel a {
    color: #1d9bf0;
    text-decoration: none;
}

.instructions-panel a:hover {
    text-decoration: underline;
}