.friend-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px; border-bottom: 1px solid #cecec3; }
.friend-avatar { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid #b7b7ac; background: #fff; color: #365f8d; }
.friend-avatar svg { width: 43px; height: 43px; }
.friend-copy h3 { margin: 0 0 5px; font-size: 16px; }
.friend-copy h3 a, .message-header a { color: #874000; }
.friend-copy p { margin: 0 0 5px; line-height: 1.5; }
.friend-action { white-space: nowrap; }
.friend-action:disabled { cursor: default; opacity: .7; }
.message-header { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 13px 16px; border-bottom: 1px solid #cecec3; background: #ecece2; font-weight: bold; }
.message-list { display: grid; gap: 12px; min-height: 92px; padding: 18px 16px; }
.message { max-width: 82%; padding: 10px 12px; border: 1px solid #b7b7ac; background: #fff; }
.message.mine { justify-self: end; border-color: #c54f00; background: #fff1df; }
.message p { margin: 0 0 7px; line-height: 1.55; white-space: pre-wrap; }
.message .small-note { display: block; margin: 0; }
.message-form { margin: 0 16px 16px; }
.message-form textarea:disabled { background: #e6e6de; cursor: not-allowed; }
.dummy-summary { margin: 0; padding: 16px; border-top: 1px solid #cecec3; line-height: 1.7; }
.demo-switch { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; font-size: 14px; color: #64645d; }
@media (max-width: 560px) { .friend-card { grid-template-columns: 48px 1fr; } .friend-action { grid-column: 1 / -1; width: 100%; } .message-header { align-items: flex-start; flex-direction: column; } .message { max-width: 94%; } }

/* Conversation picker and the friends panel groupings. */
.message-header select { height: 34px; max-width: 100%; padding: 4px 6px; font: 14px 'Courier New', Courier, monospace; border: 2px inset #c2c2b8; border-radius: 0; background: #fff; color: #242424; }
.message-header .peer-picker { display: flex; align-items: center; gap: 8px; font-weight: normal; font-size: 14px; }
.message-list { max-height: 420px; overflow-y: auto; }
.friend-card:last-child { border-bottom: 0; }
#request-list .friend-card { background: #fff6e3; }
#request-list .friend-action { background: #ff6600; border-color: #ffc18f; }