/* =========================================================================
   科米主题 Komi — 私信 / 通知 样式
   ========================================================================= */

/* ---- 头部铃铛 ---- */
.komi-bell { position: relative; }
.komi-bell__dot {
    position: absolute; top: 0; right: 0;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: #dc2626; color: #fff; font-size: 10px; line-height: 16px;
    border-radius: 999px; text-align: center; font-weight: 700;
}

/* 标签上的未读小药丸 */
.komi-pill {
    display: inline-block; min-width: 16px; padding: 0 5px;
    background: #dc2626; color: #fff; font-size: 11px; line-height: 16px;
    border-radius: 999px; font-style: normal; text-align: center; margin-left: 4px;
}

.komi-flex-between { display: flex; align-items: center; justify-content: space-between; }

/* ---- 私信：两栏 ---- */
.komi-pm { display: grid; grid-template-columns: 240px 1fr; gap: 16px; min-height: 360px; }
.komi-pm__list {
    list-style: none; margin: 0; padding: 0;
    border-right: 1px solid var(--komi-border); padding-right: 8px;
    max-height: 420px; overflow-y: auto;
}
.komi-pm__conv {
    display: flex; align-items: center; gap: 10px; padding: 10px;
    border-radius: var(--komi-radius-sm); cursor: pointer;
}
.komi-pm__conv:hover, .komi-pm__conv.is-active { background: var(--komi-bg); }
.komi-pm__avatar { width: 38px; height: 38px; border-radius: 50%; }
.komi-pm__info { flex: 1; min-width: 0; }
.komi-pm__name { font-weight: 600; font-size: 14px; }
.komi-pm__last { font-size: 12px; color: var(--komi-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.komi-pm__thread { display: flex; flex-direction: column; }
.komi-pm__messages {
    flex: 1; max-height: 360px; overflow-y: auto;
    padding: 8px; display: flex; flex-direction: column; gap: 10px;
}
.komi-bubble { max-width: 75%; align-self: flex-start; }
.komi-bubble--mine { align-self: flex-end; text-align: right; }
.komi-bubble__text {
    display: inline-block; padding: 8px 12px; border-radius: 12px;
    background: var(--komi-bg); color: var(--komi-text); text-align: left;
}
.komi-bubble--mine .komi-bubble__text { background: var(--komi-primary); color: #fff; }
.komi-bubble__time { font-size: 11px; color: var(--komi-text-muted); margin-top: 2px; }

.komi-pm__form { display: flex; gap: 8px; margin-top: 10px; }
.komi-pm__form textarea {
    flex: 1; padding: 8px 12px; border: 1px solid var(--komi-border);
    border-radius: var(--komi-radius-sm); background: var(--komi-surface);
    color: var(--komi-text); resize: vertical; font-family: inherit;
}
.komi-pm__new { margin-top: 16px; }
.komi-pm__new summary { cursor: pointer; color: var(--komi-primary); font-weight: 600; }
.komi-pm__new .komi-form { margin-top: 12px; }

/* ---- 通知列表 ---- */
.komi-notify-list { list-style: none; margin: 0; padding: 0; }
.komi-notify {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 14px 12px; border-bottom: 1px solid var(--komi-border);
    border-radius: var(--komi-radius-sm);
}
.komi-notify.is-unread { background: color-mix(in srgb, var(--komi-primary) 6%, transparent); }
.komi-notify__title { font-weight: 600; }
.komi-notify__content { font-size: 13px; color: var(--komi-text-muted); margin-top: 2px; }
.komi-notify__time { font-size: 12px; color: var(--komi-text-muted); white-space: nowrap; }

@media (max-width: 640px) {
    .komi-pm { grid-template-columns: 1fr; }
    .komi-pm__list { border-right: 0; border-bottom: 1px solid var(--komi-border); padding-right: 0; }
}