.chat-selection-bar { align-items: center; background: #edf5ff; border-bottom: 1px solid #ccdef4; display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; padding: 9px 12px; }
.chat-selection-bar[hidden] { display: none !important; }
.chat-selection-bar label { align-items: center; display: flex; gap: 6px; color: #234d78; font-size: 12px; }
.chat-selection-bar input, .chat-select-message input { accent-color: #1769d5; width: 20px; height: 20px; }
.chat-selection-bar span { margin-right: auto; color: #1769d5; font-size: 12px; font-weight: 800; }
.chat-selection-bar button { border: 1px solid #c4d8ef; background: #fff; color: #284b72; border-radius: 8px; min-height: 34px; padding: 6px 10px; font-size: 12px; }
.chat-selection-bar [data-chat-delete-selected] { color: #ba2944; background: #fff1f3; border-color: #efbcc6; }
.chat-selection-bar button:disabled { opacity: .5; cursor: not-allowed; }
.chat-select-message { position: absolute; left: 0; top: 50%; transform: translateY(-50%); padding: 8px 4px; cursor: pointer; }
.chat-workspace.is-selecting .chat-message { position: relative; padding-left: 34px; }
.chat-workspace.is-selecting .chat-message:has(input:checked) { background: #dcecff; border-radius: 10px; }
.chat-workspace.is-selecting .chat-message-actions, .chat-workspace.is-selecting .chat-message-bookmark { display: none; }
#chatMessageActions[open] { display: grid; position: fixed; top: auto; bottom: max(12px, env(safe-area-inset-bottom)); left: 10px; right: 10px; width: calc(100% - 20px); max-width: 500px; height: auto; max-height: calc(var(--mobile-visual-height, 100dvh) - 30px); margin: 0 auto; padding: 10px; gap: 5px; border: 1px solid #d5e3f2; border-radius: 18px; background: #fff; overflow-y: auto; }
#chatMessageActions::backdrop { background: rgba(10,30,54,.42); }
#chatMessageActions button { width: 100%; min-height: 46px; background: #f2f6fb; border: 0; border-radius: 10px; color: #1e4269; font-size: 16px; font-weight: 700; }
@media (max-width: 820px) {
  .chat-workspace .chat-message-actions { display: none; }
  .chat-message-content { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: pan-y; }
  body.mobile-app-shell.mobile-chat-active .chat-conversation-head:has([data-chat-selection-toggle]) > .chat-avatar { display: none; }
}

.chat-workspace {
  background: #eef3f9;
  border: 1px solid #d9e4f0;
  border-radius: 20px;
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  height: min(760px, calc(100vh - 190px));
  min-height: 560px;
  overflow: hidden;
}

.chat-sidebar {
  background: #fff;
  border-right: 1px solid #dce6f1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-hero {
  align-items: center;
  background: linear-gradient(135deg, #0d57c8, #133d78);
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 22px 20px 19px;
}

.chat-hero p,
.chat-create-card header p {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
  margin: 0 0 4px;
  opacity: .72;
}

.chat-hero h2 { font-size: 23px; margin: 0; }
.chat-hero span { display: block; font-size: 11px; margin-top: 5px; opacity: .78; }

.chat-hero button {
  align-items: center;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 11px;
  color: #fff;
  display: inline-flex;
  font-size: 11px;
  font-weight: 850;
  gap: 3px;
  padding: 9px 11px;
}

.chat-hero button b { font-size: 17px; line-height: 1; }

.chat-search {
  align-items: center;
  background: #f4f7fb;
  border: 1px solid #e0e8f1;
  border-radius: 11px;
  display: flex;
  margin: 14px 14px 8px;
  padding: 0 11px;
}

.chat-search span { color: #7790aa; font-size: 22px; transform: rotate(-18deg); }
.chat-search input { background: transparent; border: 0; color: #18324f; flex: 1; font-size: 12px; height: 41px; outline: 0; padding: 0 8px; }
.chat-room-list { flex: 1; min-height: 0; overflow-y: auto; padding: 5px 8px 12px; }

.chat-room-card {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 13px;
  color: inherit;
  display: flex;
  gap: 11px;
  padding: 11px 10px;
  text-align: left;
  width: 100%;
}

.chat-room-card:hover { background: #f1f6fc; }
.chat-room-card.is-selected { background: #e8f2ff; }

.chat-avatar {
  align-items: center;
  background: linear-gradient(135deg, #edf5ff, #d9e9ff);
  border: 1px solid #c5dcf7;
  border-radius: 14px;
  color: #0d57c8;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  height: 43px;
  justify-content: center;
  width: 43px;
}

.chat-avatar.is-group { background: linear-gradient(135deg, #f2f1ff, #e2e0ff); border-color: #d1cef8; color: #625dd0; }
.chat-room-copy { flex: 1; min-width: 0; }
.chat-room-line { align-items: center; display: flex; gap: 7px; justify-content: space-between; }
.chat-room-line strong { color: #17304c; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-room-line time { color: #98a7b8; flex: 0 0 auto; font-size: 9px; }
.chat-room-preview { margin-top: 5px; }
.chat-room-preview small { color: #718399; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-room-preview b,
.chat-menu-badge { background: #df4355; border-radius: 12px; color: #fff; font-size: 8px; font-style: normal; min-width: 18px; padding: 3px 5px; text-align: center; }
.chat-menu-badge { margin-left: auto; }

.chat-conversation { display: flex; flex-direction: column; min-width: 0; }
.chat-welcome { align-items: center; color: #7890a8; justify-content: center; text-align: center; }
.chat-welcome > span { background: #fff; border-radius: 22px; box-shadow: 0 14px 40px rgba(24,50,79,.09); font-size: 38px; padding: 20px; }
.chat-welcome h3 { color: #203b59; font-size: 18px; margin: 18px 0 6px; }
.chat-welcome p { font-size: 11px; margin: 0; }

.chat-conversation-head {
  align-items: center;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #dce6f1;
  display: flex;
  gap: 11px;
  min-height: 73px;
  padding: 11px 18px;
}

.chat-conversation-head h3 { color: #17304c; font-size: 15px; margin: 0; }
.chat-conversation-head p { color: #7d8ea2; font-size: 9px; margin: 4px 0 0; max-width: 580px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-mobile-back { display: none; }
.chat-history-action { text-align: center; }
.chat-history-action button { background: transparent; border: 0; color: #66809d; font-size: 9px; padding: 8px; }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 7px 21px 18px; }

.chat-message { align-items: flex-start; display: flex; flex-direction: column; margin: 8px 0; }
.chat-message.is-mine { align-items: flex-end; }
.chat-message-sender { color: #627b96; font-size: 9px; font-weight: 800; margin: 0 0 4px 4px; }
.chat-message-row { align-items: flex-end; display: flex; gap: 6px; max-width: min(76%, 680px); }
.chat-message-row p { background: #fff; border: 1px solid #dce5ef; border-radius: 4px 15px 15px; color: #263f5b; font-size: 12px; line-height: 1.55; margin: 0; overflow-wrap: anywhere; padding: 9px 12px; }
.chat-message.is-mine .chat-message-row p { background: #1769d5; border-color: #1769d5; border-radius: 15px 4px 15px 15px; color: #fff; }
.chat-message-meta { color: #8b9aab; display: flex; flex-direction: column; font-size: 8px; line-height: 1.35; white-space: nowrap; }

.chat-composer { align-items: flex-end; background: #fff; border-top: 1px solid #dbe5ef; display: flex; gap: 9px; padding: 12px 15px; }
.chat-composer textarea { background: #f4f7fb; border: 1px solid #dce5ef; border-radius: 17px; color: #1d3855; flex: 1; font: inherit; font-size: 12px; line-height: 1.45; max-height: 112px; min-height: 42px; outline: 0; padding: 11px 14px; resize: vertical; }
.chat-composer button { background: #1769d5; border: 0; border-radius: 13px; color: #fff; font-size: 17px; height: 42px; width: 46px; }

.chat-empty,
.chat-conversation-empty,
.chat-load-error,
.chat-loading { align-items: center; color: #7d8fa4; display: flex; flex-direction: column; justify-content: center; min-height: 220px; text-align: center; }
.chat-empty span,
.chat-conversation-empty span { font-size: 31px; }
.chat-empty strong,
.chat-conversation-empty strong,
.chat-load-error strong { color: #294562; font-size: 12px; margin-top: 9px; }
.chat-empty p,
.chat-conversation-empty p,
.chat-load-error p { font-size: 10px; margin: 5px 0; }
.chat-loading { min-height: 420px; }
.chat-loading span { animation: chatPulse 1s infinite alternate; background: #1769d5; border-radius: 50%; height: 18px; width: 18px; }
@keyframes chatPulse { to { opacity: .25; transform: scale(.72); } }

.chat-create-dialog { background: transparent; border: 0; max-width: 520px; padding: 14px; width: calc(100% - 24px); }
.chat-create-dialog::backdrop { background: rgba(10,28,49,.56); backdrop-filter: blur(3px); }
.chat-create-card { background: #fff; border-radius: 20px; box-shadow: 0 28px 90px rgba(5,31,61,.25); max-height: min(720px, calc(100vh - 40px)); overflow: hidden; }
.chat-create-card header { align-items: center; background: #102f55; color: #fff; display: flex; justify-content: space-between; padding: 18px 20px; }
.chat-create-card header h3 { font-size: 18px; margin: 0; }
.chat-create-card header button { background: rgba(255,255,255,.12); border: 0; border-radius: 10px; color: #fff; font-size: 21px; height: 34px; width: 34px; }
.chat-create-search { display: block; padding: 13px 16px 4px; }
.chat-create-search input,
.chat-room-name input { background: #f5f8fb; border: 1px solid #dce5ef; border-radius: 11px; box-sizing: border-box; color: #1b3653; height: 42px; outline: 0; padding: 0 12px; width: 100%; }
.chat-user-list { max-height: 330px; overflow-y: auto; padding: 6px 12px; }
.chat-user-option { align-items: center; border-radius: 12px; cursor: pointer; display: flex; gap: 10px; padding: 8px; }
.chat-user-option:hover { background: #f2f7fd; }
.chat-user-option input { accent-color: #1769d5; height: 17px; width: 17px; }
.chat-user-option > span:last-child { display: flex; flex: 1; flex-direction: column; }
.chat-user-option strong { color: #203b58; font-size: 12px; }
.chat-user-option small { color: #8494a6; font-size: 9px; margin-top: 3px; }
.chat-room-name { display: block; padding: 8px 16px 12px; }
.chat-room-name > span { color: #526b86; display: block; font-size: 10px; font-weight: 850; margin-bottom: 6px; }
.chat-room-name small { color: #98a5b5; font-weight: 500; }
.chat-create-card footer { align-items: center; border-top: 1px solid #e2e9f1; display: flex; justify-content: space-between; padding: 13px 16px; }
.chat-create-card footer span { color: #71849b; font-size: 10px; }
.chat-create-card footer button { background: #1769d5; border: 0; border-radius: 10px; color: #fff; font-size: 11px; font-weight: 900; padding: 11px 18px; }

@media (max-width: 720px) {
  .chat-workspace { display: block; height: calc(100vh - 150px); min-height: 480px; }
  .chat-sidebar { border-right: 0; height: 100%; }
  .chat-conversation { display: none; height: 100%; }
  .chat-workspace.has-open-room .chat-sidebar { display: none; }
  .chat-workspace.has-open-room .chat-conversation { display: flex; }
  .chat-mobile-back { align-items: center; background: #edf4fc; border: 0; border-radius: 9px; color: #1769d5; display: inline-flex; font-size: 25px; height: 36px; justify-content: center; width: 36px; }
  .chat-message-row { max-width: 88%; }
  .chat-messages { padding-left: 12px; padding-right: 12px; }
  .chat-hero { padding: 18px 16px; }
}

/* 2026-08-22 chat attachments and room settings */
.chat-conversation-copy { flex: 1; min-width: 0; }
.chat-settings-button { align-items: center; background: #eef4fb; border: 1px solid #d8e4f0; border-radius: 11px; color: #46637f; display: inline-flex; flex: 0 0 auto; font-size: 17px; height: 38px; justify-content: center; transition: .18s ease; width: 38px; }
.chat-settings-button:hover { background: #e3effc; color: #1769d5; transform: rotate(18deg); }
.chat-message-content { background: #fff; border: 1px solid #dce5ef; border-radius: 4px 15px 15px; color: #263f5b; font-size: 12px; line-height: 1.55; overflow: hidden; overflow-wrap: anywhere; }
.chat-message-content > p { margin: 0; padding: 9px 12px; }
.chat-message.is-mine .chat-message-content { background: #1769d5; border-color: #1769d5; border-radius: 15px 4px 15px 15px; color: #fff; }
.chat-message-content.has-attachment > p { border-top: 1px solid rgba(124,148,174,.22); }
.chat-message.is-mine .chat-message-content.has-attachment > p { border-top-color: rgba(255,255,255,.24); }
.chat-image-attachment { background: #edf3f9; border: 0; color: #47627e; display: block; max-width: 320px; padding: 0; text-align: left; }
.chat-image-attachment img { display: block; height: auto; max-height: 360px; object-fit: cover; width: 100%; }
.chat-image-attachment span { display: block; font-size: 9px; max-width: 300px; overflow: hidden; padding: 6px 9px; text-overflow: ellipsis; white-space: nowrap; }
.chat-message.is-mine .chat-image-attachment { color: #dbeaff; }
.chat-file-attachment { align-items: center; color: inherit; display: flex; gap: 10px; min-width: min(260px, 55vw); padding: 10px 12px; text-decoration: none; }
.chat-file-attachment > b { align-items: center; background: #e6f0fb; border-radius: 10px; color: #1769d5; display: inline-flex; flex: 0 0 auto; font-size: 17px; height: 35px; justify-content: center; width: 35px; }
.chat-message.is-mine .chat-file-attachment > b { background: rgba(255,255,255,.2); color: #fff; }
.chat-file-attachment > span { display: flex; min-width: 0; flex-direction: column; }
.chat-file-attachment strong { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-attachment small { font-size: 8px; margin-top: 3px; opacity: .72; }
.chat-pending-attachment { align-items: center; background: #f6f9fd; border-top: 1px solid #dce6f1; display: flex; gap: 10px; padding: 9px 15px; }
.chat-pending-attachment[hidden] { display: none; }
.chat-pending-attachment img, .chat-pending-file { align-items: center; background: #e7eff8; border-radius: 9px; display: inline-flex; flex: 0 0 auto; height: 42px; justify-content: center; object-fit: cover; width: 42px; }
.chat-pending-attachment > span:not(.chat-pending-file) { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.chat-pending-attachment strong { color: #29445f; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pending-attachment small { color: #75889d; font-size: 8px; margin-top: 3px; }
.chat-pending-attachment > button { background: #e9eef4; border: 0; border-radius: 50%; color: #65798e; font-size: 17px; height: 27px; width: 27px; }
.chat-attach-button { align-items: center; background: #eef4fb; border: 1px solid #d8e4f0; border-radius: 13px; color: #1769d5; cursor: pointer; display: inline-flex; flex: 0 0 auto; font-size: 21px; height: 42px; justify-content: center; width: 42px; }
.chat-attach-button input { display: none; }
.chat-composer.is-sending { opacity: .62; }
.chat-settings-dialog { background: transparent; border: 0; box-sizing: border-box; max-width: 480px; padding: 14px; width: calc(100% - 24px); }
#chatSettingsDialog.chat-settings-dialog { margin: auto; max-width: min(480px, calc(100vw - 32px)) !important; width: min(480px, calc(100vw - 32px)) !important; }
.chat-settings-dialog::backdrop { backdrop-filter: blur(3px); background: rgba(10,28,49,.56); }
.chat-settings-card { background: #fff; border-radius: 20px; box-shadow: 0 28px 90px rgba(5,31,61,.25); display: flex; flex-direction: column; max-height: min(720px, calc(100dvh - 32px)); overflow: hidden; }
.chat-settings-card > header,
.chat-settings-card > footer { flex: 0 0 auto; }
.chat-settings-card > header { align-items: center; background: linear-gradient(135deg, #123c70, #102f55); color: #fff; display: flex; justify-content: space-between; padding: 17px 20px; }
.chat-settings-card > header p { font-size: 8px; font-weight: 900; letter-spacing: .13em; margin: 0 0 4px; opacity: .68; }
.chat-settings-card > header h3 { font-size: 18px; margin: 0; }
.chat-settings-card > header button { background: rgba(255,255,255,.12); border: 0; border-radius: 10px; color: #fff; font-size: 21px; height: 34px; width: 34px; }
.chat-settings-body { flex: 1 1 auto; max-height: none; min-height: 0; overscroll-behavior: contain; overflow-y: auto; padding: 14px 16px 18px; scrollbar-gutter: stable; }
.chat-settings-body > :last-child { margin-bottom: 0; }
.chat-settings-section { border: 1px solid #e0e8f1; border-radius: 14px; margin: 0 0 12px; padding: 13px; }
.chat-settings-section h4 { color: #29445f; font-size: 11px; margin: 0 0 10px; }
.chat-settings-section > label > span { color: #526b86; display: block; font-size: 10px; font-weight: 850; margin-bottom: 6px; }
.chat-settings-section > label > div { display: flex; gap: 7px; }
.chat-settings-section input[type="text"], .chat-settings-section input[name="room_name"], .chat-settings-search input { background: #f5f8fb; border: 1px solid #dce5ef; border-radius: 10px; box-sizing: border-box; color: #1b3653; flex: 1; height: 40px; outline: 0; padding: 0 11px; width: 100%; }
.chat-settings-section label button, .chat-settings-add { background: #1769d5; border: 0; border-radius: 9px; color: #fff; flex: 0 0 auto; font-size: 10px; font-weight: 850; padding: 0 13px; }
.chat-settings-members { list-style: none; margin: 0; padding: 0; }
.chat-settings-members li, .chat-settings-user { align-items: center; border-radius: 11px; display: flex; gap: 9px; padding: 7px 6px; }
.chat-settings-user { cursor: pointer; }
.chat-settings-user:hover { background: #f2f7fd; }
.chat-settings-user input { accent-color: #1769d5; height: 17px; width: 17px; }
.chat-settings-members li > span:nth-child(2), .chat-settings-user > span:last-child { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.chat-settings-members strong, .chat-settings-user strong { color: #203b58; font-size: 10px; }
.chat-settings-members small, .chat-settings-user small { color: #8494a6; font-size: 8px; margin-top: 2px; }
.chat-settings-members li > b { background: #e7f1ff; border-radius: 10px; color: #1769d5; font-size: 8px; padding: 4px 7px; }
.chat-settings-user-list { max-height: min(210px, 28dvh); overflow-y: auto; }
.chat-settings-search { display: block; margin-bottom: 7px; }
.chat-settings-add-note { background: #eef6ff; border-radius: 10px; color: #486782; font-size: 9px; line-height: 1.55; margin: 0 0 9px; padding: 9px 10px; }
.chat-settings-add { display: block; height: 39px; margin-top: 9px; min-height: 39px; width: 100%; }
.chat-settings-info, .chat-settings-empty { background: #f4f7fb; border-radius: 11px; color: #71849b; font-size: 9px; margin: 0 0 12px; padding: 11px; }
.chat-settings-card > footer { align-items: center; border-top: 1px solid #e2e9f1; display: flex; justify-content: space-between; padding: 12px 16px; }
.chat-settings-card > footer button { background: #edf3f9; border: 0; border-radius: 9px; color: #4d6782; font-size: 10px; font-weight: 850; padding: 10px 16px; }
.chat-settings-card > footer .chat-settings-leave { background: #fff0f1; color: #cc3f4f; }
@media (max-width: 720px) {
  .chat-conversation-head { padding-left: 10px; padding-right: 10px; }
  .chat-image-attachment { max-width: 72vw; }
  .chat-composer { gap: 7px; padding-left: 9px; padding-right: 9px; }
  .chat-attach-button { width: 40px; }
  .chat-settings-dialog { padding: 7px; width: calc(100% - 14px); }
}

/* 2026-08-22 chat scroll containment */
.chat-sidebar,
.chat-conversation { height: 100%; min-height: 0; overflow: hidden; }
.chat-room-list,
.chat-messages { overscroll-behavior: contain; }

/* 2026-08-22 chat caption reset */
.chat-message-row .chat-message-content > p,
.chat-message.is-mine .chat-message-row .chat-message-content > p {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  margin: 0;
  padding: 9px 12px;
}
.chat-message-row .chat-message-content.has-attachment > p { border-top: 1px solid rgba(124,148,174,.22); }
.chat-message.is-mine .chat-message-row .chat-message-content.has-attachment > p { border-top-color: rgba(255,255,255,.24); }


/* 2026-08-22 chat photo in-app dialog */
.chat-photo-dialog { background: transparent; border: 0; height: 100vh; max-height: none; max-width: none; padding: 18px; width: 100vw; }
.chat-photo-dialog::backdrop { backdrop-filter: blur(5px); background: rgba(2,10,20,.78); }
.chat-photo-card { background: #071521; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; box-shadow: 0 28px 100px rgba(0,0,0,.48); display: flex; flex-direction: column; height: calc(100vh - 36px); margin: auto; max-width: 1180px; overflow: hidden; width: 100%; }
.chat-photo-card > header { align-items: center; background: rgba(11,37,63,.94); color: #fff; display: flex; flex: 0 0 auto; justify-content: space-between; padding: 13px 16px; }
.chat-photo-card > header p { color: #8ec3ff; font-size: 8px; font-weight: 900; letter-spacing: .13em; margin: 0 0 3px; }
.chat-photo-card > header h3 { font-size: 15px; margin: 0; max-width: min(58vw, 660px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-photo-tools { align-items: center; display: flex; gap: 8px; }
.chat-photo-tools a, .chat-photo-tools button { align-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.13); border-radius: 10px; color: #fff; display: inline-flex; font-size: 10px; font-weight: 850; height: 38px; justify-content: center; text-decoration: none; }
.chat-photo-tools a { gap: 5px; padding: 0 13px; }
.chat-photo-tools a:hover, .chat-photo-tools button:hover { background: rgba(255,255,255,.22); }
.chat-photo-tools button { font-size: 23px; width: 38px; }
.chat-photo-stage { align-items: center; display: flex; flex: 1; justify-content: center; min-height: 0; overflow: auto; padding: 14px; }
.chat-photo-stage img { display: block; max-height: 100%; max-width: 100%; object-fit: contain; }
.chat-photo-card > footer { background: rgba(11,37,63,.88); color: #b6c9da; flex: 0 0 auto; font-size: 9px; padding: 9px 15px; text-align: center; }
@media (max-width: 720px) {
  .chat-photo-dialog { padding: 7px; }
  .chat-photo-card { height: calc(100vh - 14px); }
  .chat-photo-card > header h3 { max-width: 38vw; }
  .chat-photo-tools a { font-size: 0; padding: 0; width: 38px; }
  .chat-photo-tools a span { font-size: 18px; }
}


/* 2026-08-22 chat read position, search, bookmarks and room preferences */
.chat-room-pin { background: #1769d5; border-radius: 50%; display: inline-block; height: 6px; margin-right: 5px; vertical-align: 1px; width: 6px; }
.chat-room-favorite { color: #e3a008; font-style: normal; margin-right: 4px; }
.chat-conversation-tools { align-items: center; display: flex; gap: 6px; }
.chat-settings-button.is-active { background: #1769d5; border-color: #1769d5; color: #fff; transform: none; }
.chat-message-bookmark { background: transparent; border: 0; color: #9aabbd; flex: 0 0 auto; font-size: 17px; padding: 1px; }
.chat-message-bookmark.is-active { color: #e3a008; }
.chat-read-status { background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; padding: 0; text-align: right; }
.chat-unread-divider { align-items: center; color: #d44758; display: flex; font-size: 9px; font-weight: 900; gap: 9px; margin: 13px 0; }
.chat-unread-divider::before, .chat-unread-divider::after { background: #e7aab2; content: ""; flex: 1; height: 1px; }
.chat-unread-divider span { background: #fff3f4; border: 1px solid #f0c6cb; border-radius: 12px; padding: 4px 9px; }
.chat-date-divider { align-items: center; color: #506780; display: flex; font-size: 12px; font-weight: 700; gap: 12px; line-height: 1.5; margin: 18px 0 16px; width: 100%; }
.chat-date-divider::before, .chat-date-divider::after { background: #d4dfe9; content: ""; flex: 1; height: 1px; min-width: 12px; }
.chat-date-divider time { background: #eaf0f6; border: 1px solid #d9e3ec; border-radius: 16px; padding: 5px 12px; text-align: center; white-space: nowrap; }
.chat-date-divider:first-child { margin-top: 7px; }
.chat-message.is-search-hit { animation: chatSearchHit 2.2s ease; }
@keyframes chatSearchHit { 0%, 45% { filter: drop-shadow(0 0 8px rgba(227,160,8,.8)); transform: scale(1.015); } 100% { filter: none; transform: none; } }
.chat-search-panel { background: #fff; border-bottom: 1px solid #dce6f1; box-shadow: 0 8px 22px rgba(20,52,84,.08); max-height: 44%; overflow: hidden; padding: 10px 14px; z-index: 2; }
.chat-search-panel > header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 8px; }
.chat-search-panel > header strong { color: #17304c; font-size: 11px; }
.chat-search-panel > header button { background: #edf3f9; border: 0; border-radius: 50%; color: #58708a; font-size: 18px; height: 28px; width: 28px; }
.chat-search-panel > label { align-items: center; background: #f4f7fb; border: 1px solid #dce5ef; border-radius: 10px; display: flex; padding: 0 10px; }
.chat-search-panel > label input { background: transparent; border: 0; color: #1d3855; flex: 1; font-size: 11px; height: 37px; outline: 0; padding: 0 8px; }
.chat-search-results { max-height: 220px; overflow-y: auto; padding-top: 6px; }
.chat-search-result { background: transparent; border: 0; border-bottom: 1px solid #edf2f7; color: inherit; display: block; padding: 8px 5px; position: relative; text-align: left; width: 100%; }
.chat-search-result:hover { background: #f3f7fc; }
.chat-search-result > span { align-items: center; display: flex; justify-content: space-between; }
.chat-search-result strong { color: #173b60; font-size: 10px; }
.chat-search-result time { color: #97a5b5; font-size: 8px; }
.chat-search-result b { color: #66809a; display: block; font-size: 8px; margin-top: 3px; }
.chat-search-result small { color: #334e6a; display: block; font-size: 10px; margin-top: 3px; overflow: hidden; padding-right: 24px; text-overflow: ellipsis; white-space: nowrap; }
.chat-search-result i { color: #e3a008; font-style: normal; position: absolute; right: 7px; top: 27px; }
.chat-search-empty { color: #7f91a4; font-size: 10px; margin: 0; padding: 18px 8px; text-align: center; }
.chat-settings-preferences > div { display: grid; gap: 7px; grid-template-columns: 1fr 1fr; }
.chat-settings-preferences button { background: #f2f6fb; border: 1px solid #dce6f1; border-radius: 10px; color: #57708a; font-size: 10px; font-weight: 850; min-height: 40px; }
.chat-settings-preferences button.is-active { background: #fff7df; border-color: #ecd48f; color: #a56c00; }
@media (max-width: 720px) {
  .chat-conversation-tools { gap: 4px; }
  .chat-conversation-tools .chat-settings-button { height: 34px; width: 34px; }
  .chat-search-panel { max-height: 48%; }
}
/* 2026-08-24 public group rooms */
.chat-channel-tabs {
  background: #fff;
  border-bottom: 1px solid #e3eaf2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 8px 12px 0;
}
.chat-channel-tabs button {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #7a8da3;
  display: inline-flex;
  font-size: 11px;
  font-weight: 850;
  gap: 5px;
  justify-content: center;
  padding: 10px 7px 9px;
}
.chat-channel-tabs button.is-active { border-bottom-color: #1769d5; color: #1769d5; }
.chat-channel-tabs button b {
  background: #df4355;
  border-radius: 10px;
  color: #fff;
  font-size: 8px;
  min-width: 17px;
  padding: 2px 5px;
}
.chat-public-room-card { cursor: default; }
.chat-public-room-card:hover { background: #f7f9fc; }
.chat-public-room-card .chat-room-copy { margin-right: 4px; }
.chat-room-public-badge,
.chat-room-joined-badge {
  border-radius: 10px;
  flex: 0 0 auto;
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
  padding: 3px 6px;
}
.chat-room-public-badge { background: #eceaff; color: #625dd0; }
.chat-room-joined-badge { background: #e8f5ef; color: #21875f; }
.chat-room-join {
  background: #1769d5;
  border: 0;
  border-radius: 9px;
  color: #fff;
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 900;
  min-width: 48px;
  padding: 8px 9px;
}
.chat-room-join:disabled { opacity: .55; }
.chat-public-create-body { padding: 8px 0 2px; }
.chat-public-create-body .chat-room-name { padding-top: 12px; }
.chat-public-room-guide {
  background: #f1f6fc;
  border: 1px solid #dbe7f4;
  border-radius: 13px;
  margin: 0 16px 15px;
  padding: 13px;
}
.chat-public-room-guide b { color: #1769d5; font-size: 11px; }
.chat-public-room-guide p { color: #6e8298; font-size: 9px; line-height: 1.6; margin: 5px 0 0; }
/* 2026-08-24 chat notice mentions mute */
.chat-room-muted { filter: grayscale(.12); font-size: 10px; font-style: normal; margin-right: 3px; }
.chat-room-notice { align-items: flex-start; background: #fff9e8; border-bottom: 1px solid #ecdba6; display: flex; gap: 10px; padding: 10px 18px; }
.chat-room-notice > span { background: #ffe7a4; border-radius: 10px; font-size: 15px; padding: 7px; }
.chat-room-notice > div { min-width: 0; }
.chat-room-notice b { color: #8c6100; display: block; font-size: 9px; }
.chat-room-notice p { color: #3b4e62; font-size: 10px; line-height: 1.5; margin: 3px 0; overflow-wrap: anywhere; }
.chat-room-notice small { color: #9a895f; font-size: 8px; }
.chat-mention { background: #dcecff; border-radius: 4px; color: #1769d5; font-style: normal; font-weight: 900; padding: 1px 3px; }
.chat-message.is-mine .chat-mention { background: rgba(255,255,255,.2); color: #fff; }
.chat-message.is-mentioned .chat-message-content { box-shadow: 0 0 0 2px #f1bd3e; }
.chat-composer { position: relative; }
.chat-mention-suggestions { background: #fff; border: 1px solid #d9e4ef; border-radius: 14px; bottom: calc(100% - 2px); box-shadow: 0 14px 35px rgba(16,47,85,.2); display: grid; gap: 2px; left: 65px; max-height: 260px; overflow-y: auto; padding: 6px; position: absolute; width: min(330px, calc(100% - 130px)); z-index: 8; }
.chat-mention-suggestions[hidden] { display: none; }
.chat-mention-suggestions button { align-items: center; background: #fff; border: 0; border-radius: 10px; color: inherit; display: flex; gap: 9px; height: auto; min-height: 48px; padding: 6px 8px; text-align: left; width: 100%; }
.chat-mention-suggestions button:hover { background: #eef6ff; }
.chat-mention-suggestions button > span:last-child { display: grid; min-width: 0; }
.chat-mention-suggestions strong { color: #1769d5; font-size: 10px; }
.chat-mention-suggestions small { color: #7c8ea2; font-size: 8px; margin-top: 2px; }
.chat-settings-preferences > div { grid-template-columns: repeat(3, 1fr); }
.chat-settings-preferences button.is-muted { background: #eef1f5; border-color: #cfd8e2; color: #4c6178; }
.chat-settings-preferences > p { color: #7d8ea2; font-size: 8px; line-height: 1.5; margin: 8px 1px 0; }
.chat-notice-form textarea { background: #f5f8fb; border: 1px solid #dce5ef; border-radius: 10px; box-sizing: border-box; color: #1b3653; font: inherit; font-size: 10px; line-height: 1.55; min-height: 78px; outline: 0; padding: 9px 11px; resize: vertical; width: 100%; }
.chat-notice-form > div { align-items: center; display: flex; justify-content: space-between; margin-top: 8px; }
.chat-notice-form > div > small { color: #8191a3; font-size: 8px; }
.chat-notice-form > div > span { display: flex; gap: 6px; }
.chat-notice-form button { background: #1769d5; border: 0; border-radius: 8px; color: #fff; font-size: 9px; font-weight: 850; padding: 8px 11px; }
.chat-notice-form button[data-chat-notice-clear] { background: #edf2f7; color: #61758b; }
.chat-notice-form button:disabled { cursor: default; opacity: .45; }
.chat-notice-readonly p { color: #314b66; font-size: 10px; line-height: 1.55; margin: 0 0 6px; }
.chat-notice-readonly small { color: #8392a3; font-size: 8px; }
@media (max-width: 720px) {
  .chat-room-notice { padding-left: 12px; padding-right: 12px; }
  .chat-mention-suggestions { left: 55px; width: calc(100% - 110px); }
  .chat-settings-preferences > div { grid-template-columns: 1fr; }
}
/* 2026-08-24 PC chat lifecycle and message preview */
.chat-hero-actions { align-items: center; display: flex; flex: 0 0 auto; gap: 6px; }
.chat-hero .chat-global-settings-button { background: rgba(255,255,255,.1); padding-left: 9px; padding-right: 9px; }
.chat-global-notification-setting > div { align-items: center; display: flex; gap: 14px; justify-content: space-between; }
.chat-global-notification-setting > div > span { display: grid; gap: 4px; min-width: 0; }
.chat-global-notification-setting strong { color: #203b58; font-size: 11px; }
.chat-global-notification-setting small { color: #75889d; font-size: 9px; line-height: 1.5; }
.chat-global-notification-setting button { background: #edf2f7; border: 1px solid #d6e0ea; border-radius: 11px; color: #5d7187; flex: 0 0 auto; font-size: 9px; font-weight: 900; min-width: 128px; padding: 10px 12px; }
.chat-global-notification-setting button.is-active { background: #e6f3ff; border-color: #9fc9f5; color: #1769d5; }
.chat-global-notification-setting button:disabled { cursor: wait; opacity: .55; }
.chat-global-notification-setting > p { background: #f5f8fb; border-radius: 10px; color: #71849a; font-size: 9px; line-height: 1.55; margin: 12px 0 0; padding: 9px 10px; }
.header-chat-toast { align-items: center; background: #fff; border: 1px solid #cfe0f3; border-radius: 17px; bottom: 24px; box-shadow: 0 18px 55px rgba(10,39,75,.24); color: #193654; cursor: pointer; display: grid; font: inherit; gap: 11px; grid-template-columns: 40px minmax(0,1fr) 16px; max-width: calc(100vw - 32px); opacity: 0; padding: 12px 13px; position: fixed; right: 24px; text-align: left; transform: translateY(18px); transition: opacity .2s ease, transform .2s ease; width: 360px; z-index: 6000; }
.header-chat-toast.is-visible { opacity: 1; transform: translateY(0); }
.header-chat-toast:hover { border-color: #8fbae8; box-shadow: 0 22px 65px rgba(10,39,75,.3); }
.header-chat-toast > i { align-items: center; background: linear-gradient(135deg,#1769d5,#0f4fa5); border-radius: 12px; display: flex; font-size: 18px; height: 40px; justify-content: center; width: 40px; }
.header-chat-toast > span { display: grid; min-width: 0; }
.header-chat-toast strong { color: #173552; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-chat-toast small { color: #607991; font-size: 10px; line-height: 1.45; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-chat-toast > b { color: #7890a7; font-size: 21px; }
.header-chat-toast.is-mention { border-color: #e9bf55; box-shadow: 0 18px 55px rgba(150,104,0,.22); }
@media (max-width: 720px) {
  .chat-hero { align-items: flex-start; }
  .chat-hero-actions { align-items: stretch; flex-direction: column; }
  .chat-hero-actions button { justify-content: center; }
  .chat-global-notification-setting > div { align-items: stretch; flex-direction: column; }
  .header-chat-toast { bottom: max(12px, env(safe-area-inset-bottom)); right: 12px; width: calc(100vw - 24px); }
}

/* 2026-08-24 chat replies, presence and message actions */
.chat-message-row { align-items: flex-end; }
.chat-message-actions { align-items: center; display: flex; gap: 4px; opacity: 0; transition: opacity .16s ease; }
.chat-message:hover .chat-message-actions,
.chat-message:focus-within .chat-message-actions { opacity: 1; }
.chat-message-actions button { background: #f4f7fa; border: 1px solid #dbe4ed; border-radius: 8px; color: #60758b; cursor: pointer; font: inherit; font-size: 8px; font-weight: 900; min-height: 25px; padding: 4px 7px; }
.chat-message-actions button:hover { background: #e9f2fc; border-color: #a9c9eb; color: #1769d5; }
.chat-message-actions button.is-danger:hover { background: #fff0f2; border-color: #efb4bd; color: #c9394d; }
.chat-reply-preview { background: rgba(15,44,75,.08); border: 0; border-left: 3px solid rgba(23,105,213,.58); border-radius: 7px; color: inherit; cursor: pointer; display: grid; margin: 0 0 7px; max-width: 100%; padding: 6px 8px; text-align: left; width: 100%; }
.chat-reply-preview strong,
.chat-reply-preview span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply-preview strong { color: #1769d5; font-size: 8px; }
.chat-reply-preview span { color: #657b91; font-size: 8px; margin-top: 2px; }
.chat-message.is-mine .chat-reply-preview { background: rgba(255,255,255,.15); border-left-color: rgba(255,255,255,.8); }
.chat-message.is-mine .chat-reply-preview strong,
.chat-message.is-mine .chat-reply-preview span { color: #fff; }
.chat-deleted-admin-label { display: block; font-size: 8px; font-style: normal; font-weight: 800; margin-top: 7px; opacity: .78; }
.chat-message.is-deleted .chat-message-content { background: #f2f5f8; border: 1px dashed #cfd9e3; color: #8392a3; font-style: italic; }
.chat-message.is-deleted.is-mine .chat-message-content { background: #e9eef4; color: #6f8194; }
.chat-composer-context { align-items: center; background: #eef5fd; border-top: 1px solid #d4e3f3; display: flex; gap: 12px; padding: 8px 13px; }
.chat-composer-context > span { border-left: 3px solid #1769d5; display: grid; flex: 1; min-width: 0; padding-left: 9px; }
.chat-composer-context strong { color: #1769d5; font-size: 9px; }
.chat-composer-context small { color: #657b91; font-size: 8px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-composer-context button { background: transparent; border: 0; color: #6e8194; cursor: pointer; font-size: 18px; }
.chat-presence { align-items: center; color: #75879a; display: inline-flex; font-size: 8px; font-style: normal; font-weight: 800; gap: 4px; margin-top: 4px; }
.chat-presence i { background: #9aa8b7; border-radius: 50%; display: inline-block; height: 7px; width: 7px; }
.chat-presence.is-online { color: #168553; }
.chat-presence.is-online i { background: #1db66f; box-shadow: 0 0 0 3px rgba(29,182,111,.12); }
.chat-presence.is-away { color: #b67808; }
.chat-presence.is-away i { background: #e8a427; }
.chat-presence.is-off_duty { color: #65788d; }
.chat-presence.is-off_duty i { background: #74879a; }
.chat-presence.is-compact { margin: 0 0 0 7px; vertical-align: middle; }
.chat-global-presence-setting > p { color: #71849a; font-size: 9px; line-height: 1.55; margin: 0 0 10px; }
.chat-presence-options { display: grid; gap: 7px; grid-template-columns: repeat(3,1fr); }
.chat-presence-options button { background: #f4f7fa; border: 1px solid #d7e1eb; border-radius: 10px; color: #61758a; cursor: pointer; font: inherit; font-size: 9px; font-weight: 900; padding: 9px; }
.chat-presence-options button.is-active { background: #e5f1ff; border-color: #94bfee; color: #1769d5; }
.chat-current-presence { align-items: center; color: #6e8194; display: flex; font-size: 9px; gap: 8px; margin-top: 10px; }
@media (max-width: 760px) {
  .chat-message-actions { opacity: 1; }
  .chat-presence-options { grid-template-columns: 1fr; }
}