.messenger-home-button, .messenger-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #d7cdb7; background: #fffcf5; color: #244b3e; border-radius: 24px; font: 700 12px 'DM Sans', sans-serif; cursor: pointer; }
.welcome-audio-controls .messenger-home-button { min-height: 42px; padding: 0 14px; }
.messenger-badge { display: inline-grid; place-items: center; flex: none; min-width: 20px; height: 20px; padding: 0 6px; border: 1px solid #c9d9ce; border-radius: 6px; background: #e7efe8; color: #234d3e; font: 700 10px/1 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; vertical-align: middle; }
.messenger-badge[hidden] { display: none; }
.messenger-toggle { position: fixed; z-index: 8; right: 24px; bottom: 22px; padding: 12px 18px; box-shadow: 0 5px 24px #183c3226; }
body:has(.welcome-screen:not([hidden])) .messenger-toggle, .messenger-ready #chat-toggle { display: none; }
.messenger-panel { position: fixed; z-index: 9; right: 24px; bottom: 76px; display: flex; flex-direction: column; width: min(420px, calc(100vw - 24px)); height: min(560px, calc(100dvh - 100px)); min-height: 0; overflow: hidden; border: 1px solid #d7cdb7; border-radius: 18px; background: #fffcf5; box-shadow: 0 16px 60px #183c3240; color: #244b3e; font-family: 'DM Sans', sans-serif; }
.messenger-panel[hidden] { display: none; }
.messenger-heading { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: #1b4538; color: #fff7e7; }
.messenger-heading strong { font: 600 22px 'Playfair Display', Georgia, serif; }
.messenger-heading small { display: block; margin-top: 5px; font-size: 11px; line-height: 1.4; color: #d0dfd3; }
.messenger-heading button { flex: none; width: 36px; height: 36px; border: 1px solid #ffffff33; border-radius: 50%; background: transparent; color: white; font-size: 23px; cursor: pointer; }
.messenger-nav { display: flex; gap: 5px; padding: 10px; border-bottom: 1px solid #e4dece; }
.messenger-nav button { flex: 1; min-height: 38px; border: 1px solid #ded7c6; border-radius: 8px; background: transparent; color: #4c6456; font-size: 12px; cursor: pointer; }
.messenger-nav button[aria-pressed='true'] { background: #204d3c; border-color: #204d3c; color: white; }
.messenger-nav button:disabled { opacity: .45; cursor: default; }
.messenger-conversation, .messenger-friends-view { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.messenger-conversation[hidden], .messenger-friends-view[hidden], .messenger-login[hidden] { display: none; }
.messenger-back, .messenger-manage-friends { align-self: flex-start; min-height: 34px; margin: 4px 12px; padding: 5px 0; border: 0; background: transparent; color: #466650; font-size: 12px; cursor: pointer; }
.messenger-back[hidden] { display: none; }
.messenger-messages, .messenger-friend-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 14px; }
.messenger-messages::-webkit-scrollbar, .messenger-friend-list::-webkit-scrollbar { display: none; }
.messenger-message { width: fit-content; max-width: 94%; margin: 0 0 10px; padding: 10px 12px; border: 1px solid #e7e0cf; border-radius: 12px 12px 12px 3px; background: #f2efe5; overflow-wrap: anywhere; }
.messenger-message.is-own { margin-left: auto; border-color: #ccdfc9; border-radius: 12px 12px 3px 12px; background: #e8f0e2; }
.messenger-message.is-grouped { margin-top: -6px; }
.messenger-message.is-grouped header strong { font-weight: 400; }
.messenger-message.is-removed p { font-style: italic; color: #758071; }
.messenger-admin-badge { background: #244b3e; color: #fff; border-radius: 4px; padding: 2px 5px; font-size: 9px; }
.messenger-tools { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 12px; color: #687766; font-size: 10px; }
.messenger-tools button, .messenger-report { border: 0; background: transparent; color: #536c5d; text-decoration: underline; cursor: pointer; font-size: 10px; padding: 6px 2px; }
.messenger-latest { flex: none; align-self: center; border: 1px solid #d7cdb7; border-radius: 20px; background: #f2efe5; color: #244b3e; padding: 8px 14px; cursor: pointer; }
.messenger-restriction { flex: none; padding: 8px 12px; margin: 0; color: #874c32; font-size: 11px; }
.messenger-moderation-view { flex: 1; min-height: 0; padding: 12px; overflow: auto; scrollbar-width: none; font-size: 12px; }
.messenger-moderation-view::-webkit-scrollbar { display: none; }
.messenger-moderation-view[hidden], .messenger-latest[hidden] { display: none; }
.messenger-review { padding: 10px 0; border-bottom: 1px solid #ded7c6; overflow-wrap: anywhere; }
.messenger-moderation-actions { display: flex; gap: 5px; margin-top: 6px; }
.messenger-moderation-actions select { flex: 1; min-width: 0; }
.messenger-moderation-actions :is(select,button), .messenger-moderation-view button { min-height: 30px; border: 1px solid #d7cdb7; border-radius: 5px; color: #244b3e; background: #fff; font-size: 11px; cursor: pointer; }
.messenger-message header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 11px; }
.messenger-message time { color: #758071; font-size: 9px; }
.messenger-message p { margin: 5px 0 0; color: #263c31; font-size: 13px; line-height: 1.5; }
.messenger-empty { padding: 20px 8px; color: #687766; font-size: 13px; line-height: 1.6; text-align: center; }
.messenger-report + .messenger-report { margin-left: 12px; }
.table-chat-players { flex: none; margin: 0 12px 6px; color: #466650; font-size: 11px; }
.table-chat-players summary { padding: 6px 0; cursor: pointer; }
.table-chat-players p { margin: 3px 0 6px; font-size: 10px; }
#table-chat-player-controls { max-height: 100px; overflow: auto; scrollbar-width: none; }
#table-chat-player-controls::-webkit-scrollbar { display: none; }
#table-chat-player-controls > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 0; }
#table-chat-player-controls button { background: #f5efdf; color: #355743; border: 1px solid #d5ccb7; border-radius: 5px; padding: 5px 8px; cursor: pointer; }
.chat-message-mute-button { display: block; margin-top: 5px; padding: 4px 0; border: 0; background: transparent; color: #466650; font-size: 11px; cursor: pointer; text-decoration: underline; }
.chat-emoji-picker { flex: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; padding: 6px 10px; border-top: 1px solid #ded7c6; background: #f5f1e6; }
.chat-emoji-picker[hidden] { display: none; }
.chat-emoji-picker button { min-width: 0; height: 34px; padding: 2px; border: 0; border-radius: 5px; background: transparent; font-size: 23px; cursor: pointer; }
.chat-emoji-picker button:hover { background: #e4e9dc; }
:is(.messenger-form,.chat-form) .chat-emoji-toggle { flex: none; width: 34px; min-width: 34px; padding: 0; color: #244b3e; background: #f2efe5; font-size: 23px; }
.messenger-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #e4dece; }
.messenger-form input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #d6cebc; border-radius: 8px; background: white; color: #244b3e; font-size: 13px; }
.messenger-form button, .messenger-login button { min-height: 42px; border: 0; border-radius: 8px; padding: 0 14px; background: #244b3e; color: white; font-size: 12px; cursor: pointer; }
.messenger-status { flex: none; margin: 0; padding: 0 14px; color: #85602a; font-size: 11px; line-height: 1.5; }
.messenger-status:empty { display: none; }
.messenger-retention { margin: 0; padding: 0 14px 10px; color: #7b8173; font-size: 10px; }
.messenger-login { padding: 24px; font-size: 13px; line-height: 1.6; }
.messenger-friend { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 10px; margin-bottom: 8px; border: 1px solid #e0d9c8; border-radius: 10px; background: #f8f6ee; color: #244b3e; text-align: left; cursor: pointer; }
.messenger-friend strong { display: block; font-size: 14px; }
.messenger-friend small { display: block; margin-top: 5px; font-size: 11px; color: #71816f; }
.friend-message-button { border: 1px solid #d5ccb7; border-radius: 5px; background: #f5efdf; color: #355743; padding: 5px 8px; font: 600 10px 'DM Sans'; cursor: pointer; }
.chat-social-open { min-height: 34px; margin: 8px 12px 0; border: 1px solid #d7cdb7; border-radius: 7px; color: #244b3e; background: #f5efdf; font-size: 12px; cursor: pointer; }
.messenger-ready .chat-panel { width: min(420px, calc(100vw - 24px)); height: min(520px, calc(100dvh - 100px)); border-radius: 16px; }
.messenger-ready .chat-header { padding: 14px; }
.messenger-ready .chat-header strong { font-size: 15px; }
.messenger-ready .chat-header small, .messenger-ready .chat-guidelines { font-size: 10px; line-height: 1.5; }
.messenger-ready .chat-message { font-size: 13px; }
.messenger-ready .chat-message strong { font-size: 12px; }
.messenger-ready .chat-form input { min-height: 40px; font-size: 13px; }
.messenger-ready .chat-form button { min-width: 40px; min-height: 40px; font-size: 16px; }
.friend-list .friend-row { grid-template-columns: minmax(70px, 1fr) auto auto auto; }
@media (max-width: 760px) {
  .welcome-audio-controls .messenger-home-button { position: relative; width: 40px; padding: 0; font-size: 19px; }
  .welcome-audio-controls .messenger-home-button .messenger-label { display: none; }
  .welcome-audio-controls .messenger-home-button .messenger-badge { position: absolute; right: 5px; top: 5px; min-width: 7px; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #38705a; font-size: 0; }
  .welcome-audio-controls .messenger-home-button .messenger-badge[hidden] { display: none; }
  .messenger-panel { right: 8px; top: calc(var(--messenger-viewport-top, 0px) + 8px); bottom: auto; width: calc(100vw - 16px); height: min(640px, calc(var(--messenger-viewport-height, 100dvh) - 16px)); }
  .messenger-form input { font-size: 16px; }
  .messenger-ready .chat-panel { right: 8px; top: calc(var(--chat-viewport-top, 0px) + 8px); bottom: auto; width: calc(100vw - 16px); height: min(640px, calc(var(--chat-viewport-height, 100dvh) - 16px)); }
  .messenger-ready .chat-form input { font-size: 16px; }
  .messenger-toggle { right: 12px; bottom: 16px; }
  .dashboard-friend-list .friend-message-button { padding: 3px; font-size: 7px; }
}
@media (max-height: 460px) {
  .messenger-ready .chat-header { padding: 7px 10px; }
  .messenger-ready .chat-header small, .messenger-ready .chat-guidelines, .table-chat-players p { display: none; }
  .chat-social-open { min-height: 28px; margin-top: 4px; }
  #table-chat-player-controls { max-height: 54px; }
  .chat-emoji-picker { padding: 3px 8px; gap: 0; }
  .chat-emoji-picker button { height: 28px; font-size: 21px; }
  .messenger-heading { padding: 8px 12px; }
  .messenger-heading strong { font-size: 18px; }
  .messenger-heading small, .messenger-retention, .messenger-tools > span { display: none; }
  .messenger-nav { padding: 5px 10px; }
  .messenger-nav button { min-height: 30px; }
  .messenger-form { padding: 6px 10px; }
  .messenger-tools { padding: 0 10px; }
  .messenger-form :is(input,button) { min-height: 36px; height: 36px; }
}
.messenger-history-button { flex: none; border: 0; border-bottom: 1px solid #e4dece; background: #f8f5ec; padding: 8px; font: 500 11px 'DM Sans', sans-serif; color: #31503d; cursor: pointer; }
.messenger-heading > div { min-width: 0; }
#messenger-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-nav button { min-width: 0; padding: 5px 3px; }
.messenger-groups-view, .messenger-group-settings { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.messenger-groups-view[hidden], .messenger-group-settings[hidden] { display: none; }
.messenger-group-list, .messenger-group-settings-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; padding: 0 12px 12px; }
.messenger-group-list::-webkit-scrollbar, .messenger-group-settings-body::-webkit-scrollbar { display: none; }
.messenger-group-form { padding: 10px 12px 0; flex: none; }
.messenger-group-form[hidden] { display: none; }
.messenger-group-settings-body .messenger-group-form { padding: 0; }
.messenger-group-form label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; }
.messenger-group-form > div { display: flex; gap: 6px; }
.messenger-group-form input, #messenger-group-filter { min-width: 0; width: 100%; flex: 1; min-height: 36px; padding: 7px 9px; border: 1px solid #d7cdb7; border-radius: 7px; box-sizing: border-box; color: #244b3e; background: white; font: 13px 'DM Sans', sans-serif; }
.messenger-group-form button, .messenger-group-row button, .messenger-group-leave { flex: none; min-height: 34px; padding: 6px 9px; border: 1px solid #d7cdb7; border-radius: 7px; background: #f2efe5; color: #244b3e; font: 12px 'DM Sans', sans-serif; cursor: pointer; }
.messenger-group-form button { background: #244b3e; color: white; }
.messenger-group-help { font-size: 11px; line-height: 1.5; color: #687766; margin: 8px 12px; }
.messenger-group-settings-body .messenger-group-help { margin: 8px 0; }
.messenger-group-row { display: flex; align-items: center; gap: 6px; padding: 9px 0; border-bottom: 1px solid #e4dece; }
.messenger-group-row > div { flex: 1; min-width: 0; }
.messenger-group-row strong, .messenger-group-row small { display: block; overflow-wrap: anywhere; }
.messenger-group-row strong { font-size: 12px; }
.messenger-group-row small { margin-top: 4px; color: #687766; font-size: 10px; }
.messenger-group-settings h3 { font-size: 13px; margin: 12px 0 3px; }
.messenger-group-leave { width: calc(100% - 24px); color: #934e43; margin: 6px 12px 10px; }
.messenger-group-list .messenger-friend { margin-top: 8px; }
.messenger-group-list .messenger-friend span { min-width: 0; overflow-wrap: anywhere; }
.messenger-panel button:disabled { cursor: default; opacity: .5; }
#messenger-group-manage { margin-top: 0; color: #355f45; font-weight: 600; }
@media (max-width: 760px) { .messenger-group-form input, #messenger-group-filter { font-size: 16px; } }
@media (max-height: 460px) {
  .messenger-panel { top: 8px; bottom: auto; height: calc(100dvh - 16px); }
  .messenger-group-form { padding-top: 5px; }
  .messenger-group-help { margin-top: 4px; margin-bottom: 4px; }
  #messenger-back, #messenger-group-manage { min-height: 26px; margin-top: 0; margin-bottom: 0; padding: 2px 0; }
}