/* Messenger of the friend window (ui/messenger.js) and the text of chat and messenger (ui/chattext.js): conversations,
   item links, emojis and their picker. Art pixels like game.css (zoomed by --px). */

/* ---------- friend window: the list, a conversation next to it ---------- */
#friends-win .fr-cols { display: flex; gap: 6px; align-items: stretch; }
#friends-win .fr-left { flex: none; width: 162px; min-width: 0; }
#friends-win.ms-open .fr-list { height: 150px; max-height: none; }
#friends-win .fr-row.cur, #friends-win .ms-row.cur { box-shadow: inset 0 0 0 1px var(--bronze); }
/* unread messages of a friend / a conversation */
.fr-badge { flex: none; min-width: 7px; height: 7px; padding: 0 2px; font-size: 6px; line-height: 7px; text-align: center; color: #fff;
  background: #b8322a; box-shadow: 0 0 0 1px var(--edge); text-shadow: var(--ol); }

/* conversation list (tab "Nachrichten"): name and time, the last message below */
.ms-row { padding: 1px 2px 2px; cursor: pointer; color: var(--dim); }
.ms-row:nth-child(odd) { background: rgba(0, 0, 0, .18); }
.ms-row:hover { background: rgba(242, 196, 90, .08); }
.ms-r1 { display: flex; align-items: center; gap: 3px; height: 9px; font-size: 7px; }
.ms-row .fr-name { color: var(--text); }
.ms-row.on .fr-dot { background: var(--green); }
.ms-row.unread .fr-name { color: var(--gold); }
.ms-ago { flex: none; font-size: 6px; color: var(--dim); }
.ms-r2 { height: 8px; padding-left: 7px; font-size: 6px; line-height: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-row.unread .ms-r2 { color: var(--text); }

/* the conversation: as high as the list (its own content never makes the window taller) */
.ms-pane { position: relative; flex: 1; min-width: 0; }
.ms-inner { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ms-head { flex: none; display: flex; align-items: center; gap: 3px; height: 17px; padding: 0 2px 0 4px;
  background: #15100d; box-shadow: inset 0 0 0 1px #33281d; }
.ms-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; cursor: pointer; }
.ms-pane.on .ms-who .fr-dot { background: var(--green); }
.ms-id { display: flex; flex-direction: column; min-width: 0; }
.ms-name { height: 8px; font-size: 8px; line-height: 8px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-who:hover .ms-name { color: #fff; }
.ms-sub { height: 7px; font-size: 6px; line-height: 7px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-close { flex: none; width: 11px; height: 11px; cursor: pointer; background: var(--ic-close) center / 12px 12px no-repeat; opacity: .75; }
.ms-close:hover { opacity: 1; filter: drop-shadow(0 0 0 var(--red)); }
.ms-log { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; margin-top: 2px; padding: 2px 4px 3px 3px;
  background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px #2e251c; }
.ms-log > :first-child { margin-top: auto; }
.ms-empty { padding: 6px 4px; font-size: 7px; line-height: 9px; text-align: center; }
.ms-more { padding: 2px; font-size: 6px; text-align: center; cursor: pointer; }
.ms-more:hover { color: var(--text); }
.ms-day { align-self: center; margin: 4px 0 2px; padding: 0 4px; font-size: 6px; line-height: 8px; color: var(--dim);
  background: #1d1712; box-shadow: inset 0 0 0 1px #2e251c; }
.ms-msg { display: flex; flex-direction: column; align-items: flex-start; margin-top: 1px; }
.ms-msg.end { margin-bottom: 2px; }
.ms-msg.mine { align-items: flex-end; }
.ms-bub { max-width: 152px; padding: 1px 4px 2px; font-size: 7px; line-height: 9px; overflow-wrap: anywhere; white-space: pre-wrap;
  background: #241c15; box-shadow: inset 0 0 0 1px #3a2e22; }
.ms-msg.mine .ms-bub { background: #392b19; box-shadow: inset 0 0 0 1px #6a5232; }
/* 1-3 emojis alone: big, without a bubble */
.ms-msg.big .ms-bub { padding: 0; background: none; box-shadow: none; }
.ms-msg.big .emo { font-size: 15px; line-height: 17px; }
.ms-time { margin-top: 1px; padding: 0 1px; font-size: 6px; line-height: 7px; color: var(--dim); }
.ms-typing { flex: none; height: 8px; padding: 0 2px; font-size: 6px; line-height: 8px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-note { flex: none; padding: 0 2px 1px; font-size: 6px; line-height: 7px; color: var(--dim); }
.ms-note.err { color: #ff8a7a; }
.ms-bar { flex: none; display: flex; align-items: center; gap: 2px; }
#ui .ms-bar .ms-text { flex: 1; min-width: 0; height: 12px; font-size: 7px; }
.ms-bar .btn.small { flex: none; min-width: 0; height: 12px; }
.ms-bar .ms-go { padding: 0 5px; }

/* ---------- text of chat and messenger ---------- */
/* item link: tooltip of the item on hover, gold with bonuses like the tooltip title */
.ilink { color: #f1e6c0; cursor: pointer; }
.ilink.bon { color: #ffc800; }
.ilink:hover { color: #fff; }
/* emojis: the colour font of the system, a little bigger than the narrow pixel font, without growing the line */
.emo { font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; font-size-adjust: none; font-size: 7px; line-height: 0; }
#chat .log div.ms-chat { cursor: pointer; }
#chat .log div.ms-chat:hover { background: rgba(231, 155, 255, .08); }
.ch-w-tag { color: #e79bff; }

/* chat input with the emoji button */
#chat .chat-row { display: flex; gap: 2px; margin-top: 2px; }
#chat .chat-row #chat-input { flex: 1; min-width: 0; width: auto; margin-top: 0; }
#chat.idle .chat-row .emo-btn { opacity: .35; }
.btn.small.emo-btn { flex: none; width: 14px; min-width: 0; height: 12px; padding: 0; }

/* emoji picker over its button */
.emo-pick { position: absolute; z-index: 9100; display: grid; grid-template-columns: repeat(8, 13px); gap: 1px; padding: 3px; }
.emo-k { display: flex; align-items: center; justify-content: center; width: 13px; height: 13px; cursor: pointer;
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; font-size-adjust: none; font-size: 9px; line-height: 1; }
.emo-k:hover { background: rgba(242, 196, 90, .18); box-shadow: inset 0 0 0 1px var(--bronze); }

/* item tooltips: "Alt + Klick" opens the wiki - while typing in the chat or the messenger it puts the item there */
#ui .tooltip .tt-link { display: none; }
#ui.typing .tooltip .tt-link { display: block; }
#ui.typing .tooltip .tt-wiki { display: none; }