.card {
    min-width: 200px;
}
.avatar-image {
    border-radius: 50%;
}
/*
grid 用这个网站生成
https://griddy.io/
*/
main.container1 {
    height: 100vh;
    display: grid;
    grid-template-columns: 20% 240fr 20%;
    grid-template-rows: 2fr 150px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-items: stretch;
    align-items: stretch;
}

.talk-center {
/*    background: white;*/

/*    
    子节点纵向排列
    并且撑满占满一屏
    
    --pico-block-spacing-vertical 是上下两端留白
    子节点内容 + 留白 == 100vh
*/
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--pico-block-spacing-vertical) - var(--pico-block-spacing-vertical));
}

#id-button-load-message {
    /* 加载按钮左对齐 */
    align-self: start;
}

#id-message-container {
    /* 让消息窗口能撑满剩余空间 */
    flex: 1;
    background: #f2f2f2;
}

.input-container {
/*    background: lightblue;*/
}

ul {
    padding-left: 0px;
}
li button {
    width: 100%;
}

.color-red {
    background: red;
}

/*
fixme
按钮里的 span 会导致对 button 的事件代理失效
所以在 css 里禁用
不应该这样修复  因为隔太远了  太容易漏处理导致出问题
*/
button * {
    pointer-events: none;
}

.label-message-time {
    color: #888888;
    font-size: 60%;
}

article {
    padding: 10px 10px;
    margin-bottom: 10px;
}

span.online-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: lightgray;
}
span.online-indicator.online {
    background: limegreen;
}

.no-margin-popup, .no-margin-popup img {
    margin: 0;
}


.no-margin-popup {
    width: auto;
}