/* 2026-08-24: cohesive journal, desktop editing, social badges and composers */
.inline-editable { white-space: pre-line; }
body.home-editing .inline-editable { white-space: pre-wrap; }
.message-widget:not([data-app]) { cursor: default; }

.diary-media,
.diary-media.single {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: min(31%, 118px);
  gap: 5px;
  width: 100%;
  margin: 12px 0 5px;
  padding: 0 0 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.diary-media::-webkit-scrollbar { display: none; }
.diary-media.single { grid-auto-columns: min(62%, 220px); }
.diary-media button {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f0f0ed;
  scroll-snap-align: start;
}
.diary-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.diary-video-thumb { position: relative; width: min(62%, 220px); aspect-ratio: 1; margin: 8px 0; padding: 0; overflow: hidden; border: 0; background: #eee; }
.diary-video-thumb video { width: 100%; height: 100%; object-fit: cover; }
.diary-video-thumb > span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20,20,20,.12); }
.diary-video-thumb svg { width: 28px; height: 28px; padding: 8px; border-radius: 50%; fill: white; background: rgba(24,24,24,.58); }
.diary-photo-preview video { width: 100%; height: 100%; object-fit: cover; }
.diary-lightbox video { max-width: 92%; max-height: 82%; background: #111; }
.diary-attachment-options { grid-template-columns: repeat(4, 1fr) !important; }

.friend-row { position: relative; }
.friend-row .friend-copy { min-width: 0; }
.friend-row .friend-copy strong,
.friend-row .friend-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-row .friend-copy small { margin-top: 4px; color: #92928e; font-size: 7px; }
.friend-row .friend-meta { display: grid; justify-items: end; gap: 6px; color: #a0a09b; font-size: 6px; }
.friend-unread { min-width: 15px; height: 15px; padding: 0 4px; box-sizing: border-box; display: grid; place-items: center; border-radius: 999px; background: #343432; color: #fff; font: 600 7px/1 var(--font-family); }

/* Friend and AI composers use the same calm, light treatment. */
.social-app .chat-room { grid-template-rows: 88px 0 minmax(0,1fr) 68px; }
.chat-room .message-composer,
.assistant-composer {
  box-sizing: border-box;
  border: 1px solid #deded9 !important;
  border-radius: 24px !important;
  background: rgba(250,250,248,.96) !important;
  box-shadow: 0 8px 24px rgba(25,25,23,.08) !important;
}
.chat-room .message-composer { height: 46px; margin: 7px 0 10px; padding: 0 6px 0 10px; }
.chat-room .message-composer textarea,
.assistant-composer textarea { color: #292927 !important; font-size: 16px !important; background: transparent !important; }
.chat-room .message-composer textarea::placeholder,
.assistant-composer textarea::placeholder { color: #9b9b96 !important; font-size: 10px !important; }
.chat-room .message-composer button:first-child,
.assistant-composer > button:first-of-type { border-color: #cecec9 !important; color: #6e6e69 !important; background: transparent !important; }
.chat-room .message-composer button:last-child,
.assistant-composer > button[type="submit"] { border: 0 !important; border-radius: 50% !important; background: #373735 !important; color: #f7f7f5 !important; }

@media (max-width: 430px) {
  .diary-media { grid-auto-columns: 31%; }
  .diary-media.single { grid-auto-columns: 64%; }
}