.HeaderBubble-from {
    min-width: 0;
    flex: 0 0 auto;
    font-weight: bold;
    color: #378cd2;
    /* font-size: 85%; */
}
.AiEntry .HeaderBubble-from {
    color: #3bb148;
}
.SystemEntry .HeaderBubble-from {
    color: #762828;
}
.HeaderBubble-time {
    flex: 0 0 auto;
    font-size: 70%;
    color: #555;
}
.HeaderBubble {
    min-width: 0;
    display: flex;
    flex-flow: row;
    gap: 0.5rem;
    align-items: baseline;
}

.ThinkingBubble {
    /* font-size: 85%; */
    color: #555;
    font-style: italic;
}

.ThinkingBubble, .TextBubble {
    min-width: 0;
    align-self: stretch;
}

.ThinkingBubble-content, .TextBubble-content {
    min-width: 0;
}

.SystemEntry {
    color: #a6a6a6;
}
.SystemEntry-from {
    color: #762828;
}

.ToolBubble {
    align-self: stretch;
}
.ToolBubble-full {
    flex-flow: column;
    max-height: 50vh;
    overflow-y: auto;
    display: flex;

    font-family: 'Courier New', monospace;
    font-size: 85%;
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(124, 124, 124, 0.3);
    padding: 0.4rem 0.6rem;
    border-radius: 3px;
    color: #9a9a9a;    
}

.ToolBubble-name, .ToolBubble-input {
    font-weight: bold;
    color: #48af65;
    /* border-bottom: 1px solid rgba(241, 194, 50, 0.1); */
}
.ToolBubble-result {
    background: rgba(0, 0, 0, 1.0);
    color: #9a9a9a; 
}

.ToolBubble-name,
.ToolBubble-input,
.ToolBubble-result {
    padding: 0.3rem 0.6rem;
}
.AiEntry img {
    max-width: 10rem;
    max-height: 10rem;
}
.ToolBubble-full {
    gap: 0.3rem;
}

.ImageBubble {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.ImageBubble img {
    max-width: 10rem;
    max-height: 10rem;
    cursor: pointer;
}
.ImageBubble-enlarged {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    flex-flow: row;
    overflow: auto;
}
.ImageBubble-enlarged img { 
	object-fit: contain; /* contain or scale-down */
    max-width: 75vw;
    max-height: 70vh;
}
/* .popEnlargedImage {
    max-width: 80vw;
    max-height: 80vh;
    width: auto;
    height: auto;
} */
.popEnlargedImage .popup {
    width: auto;
    height: auto;
    max-height: 80vh;
    max-width: 80vw;
    flex: 0 0 auto;
}
.popEnlargedImage .popup-inner {
    flex: 0 1 auto;
    overflow: hidden;
}


.Trace {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: #555;
    /* font-size: 85%; */
    width: 100%;
    text-align: center;
    align-self: stretch;
}
.Trace::before,
.Trace::after {
    content: '';
    flex: 1;
    border-top: 1px solid #555;
}



.TextBubble-content p, .ThinkingBubble-content p {
    margin: 0;
}