/* Keep the real group chat controls readable at the final design's phone width. */
.chat-album-preview { display:flex; align-items:center; justify-content:space-between; gap:14px; width:calc(100% - 44px); margin:8px 22px 4px; padding:13px 15px; border:1px solid #e9eae6; border-radius:15px; background:#fff; color:#262a25; text-align:left; }
.chat-album-preview[hidden] { display:none!important; }
.chat-album-preview-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.chat-album-preview-copy strong { font-size:13px; }
.chat-album-preview-copy small { color:#838981; font-size:11px; }
.chat-album-preview-copy em { color:#678b29; font-size:11px; font-style:normal; font-weight:700; }
.chat-album-preview-images { display:flex; justify-content:flex-end; flex:none; min-width:70px; }
.chat-album-preview-images img { width:40px; height:46px; margin-left:-11px; border:2px solid #fff; border-radius:8px; object-fit:cover; }
.chat-album-preview:not(.has-images) .chat-album-preview-images::before { content:'▧'; display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:#f1f4ed; color:#5d6c53; font-size:22px; }
.chat-destiny-preview { display:flex; align-items:center; justify-content:space-between; width:calc(100% - 44px); margin:8px 22px 4px; padding:12px 15px; border:1px solid #e9eae6; border-radius:15px; background:#f6f9ec; color:#262a25; text-align:left; }
.chat-destiny-preview[hidden], .chat-share-photo[hidden] { display:none!important; }
.chat-destiny-preview span { display:flex; flex-direction:column; gap:3px; }
.chat-destiny-preview strong { font-size:13px; }
.chat-destiny-preview small { color:#838981; font-size:11px; }
.chat-destiny-preview em { color:#628326; font-size:11px; font-style:normal; font-weight:700; }
.chat-share-photo { display:grid; place-items:center; flex:none; width:32px; height:32px; padding:0; border:0; border-radius:9px; background:transparent; color:#526453; }
.chat-share-photo:hover { background:#e8eee5; }
.chat-share-photo .ui-icon { width:20px; height:20px; }
@media (max-width:680px) {
  .app-shell.mode-messages.chat-open .chat-captain-banner { width:calc(100% - 28px); margin:9px 14px 4px; padding:11px 12px; border:1px solid #e8eae5; border-radius:15px; background:#f4f5f1; color:#29302a; box-shadow:none; }
  .app-shell.mode-messages.chat-open .chat-captain-banner:hover { background:#edf1e8; box-shadow:none; }
  .app-shell.mode-messages.chat-open .captain-float-avatar { background:#202820; color:#d8f647; }
  .app-shell.mode-messages.chat-open .captain-float-heading strong { color:#2a302a; }
  .app-shell.mode-messages.chat-open .captain-float-heading em { background:#e5ecd7; color:#557037; }
  .app-shell.mode-messages.chat-open .captain-float-details > span { color:#808880; }
  .app-shell.mode-messages.chat-open .captain-float-details b { color:#303930; }
  .app-shell.mode-messages.chat-open .captain-float-content small { color:#7e8979; }
  .app-shell.mode-messages.chat-open .captain-float-action { background:#202820; color:#e9f8c8; }
  .app-shell.mode-messages.chat-open .chat-album-preview { width:calc(100% - 28px); margin:7px 14px 4px; }
  .app-shell.mode-messages.chat-open .chat-destiny-preview { width:calc(100% - 28px); margin:7px 14px 4px; }
  .app-shell.mode-messages.chat-open .chat-header { gap:6px; min-height:66px; padding:8px 12px; }
  .app-shell.mode-messages.chat-open .chat-header .back-button,
  .app-shell.mode-messages.chat-open .chat-header .chat-info-button { flex:none; width:38px; height:38px; min-width:38px; }
  .app-shell.mode-messages.chat-open .chat-heading { flex:1 1 0; min-width:0; }
  .app-shell.mode-messages.chat-open .chat-heading h2 { overflow:hidden; margin-bottom:2px; font-size:16px; line-height:22px; text-overflow:ellipsis; white-space:nowrap; }
  .app-shell.mode-messages.chat-open .chat-heading p { overflow:hidden; font-size:11px; line-height:17px; text-overflow:ellipsis; white-space:nowrap; }
  .app-shell.mode-messages.chat-open .chat-captain-button,
  .app-shell.mode-messages.chat-open .chat-album-button { display:grid; place-items:center; flex:none; width:36px; height:36px; min-width:36px; min-height:36px; padding:0; border-radius:12px; font-size:0; white-space:nowrap; }
  .app-shell.mode-messages.chat-open .chat-captain-button::after { content:'✦'; font-size:18px; line-height:1; }
  .app-shell.mode-messages.chat-open .chat-album-button::after { content:'▧'; font-size:18px; line-height:1; }
  .app-shell.mode-messages.chat-open :is(.chat-captain-button,.chat-album-button)[hidden] { display:none; }
}