/* Social surfaces share the finance palette while keeping their own hierarchy. */
.messages-modal { padding: 0; background: #f4f8f6; border-color: #769988; }
.messages-modal > .modal-heading {
  padding: 18px 22px; background: linear-gradient(115deg, #164b36, #176463);
  color: #fff; gap: 10px;
}
.messages-modal .modal-heading h2 { display: flex; align-items: center; gap: 12px; flex: 1; font-size: 20px; margin: 0; }
.chat-brand-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #ffffff1c; }
.chat-brand-icon svg { width: 23px; height: 23px; }
.messages-modal .modal-heading .modal-close,
.messages-modal.chat-open .modal-heading .message-list-back { color: #fff; background: #ffffff18; border: 1px solid #ffffff80; }
.messages-modal .modal-heading .modal-close:hover,
.messages-modal.chat-open .modal-heading .message-list-back:hover { background: #ffffff30; }
.chat-tools { display: flex; gap: 20px; align-items: center; padding: 14px 20px 0; flex-shrink: 0; }
.chat-search { display: flex; align-items: center; gap: 9px; width: 300px; padding: 0 12px; border: 1px solid var(--control-line); border-radius: 12px; background: #fff; }
.chat-search > svg { width: 19px; height: 19px; color: var(--muted); flex-shrink: 0; }
.chat-search input { width: 100%; min-width: 0; min-height: 44px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; }
.chat-search:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px #14604426; }
.chat-tools-note { font-size: 12px; color: var(--muted); }
.messages-modal .message-layout { margin: 14px 20px 20px; }
.messages-modal .message-sidebar { background: #e3eee9; padding: 8px; }
.messages-modal .conversation { border: 1px solid transparent; border-bottom-color: #bdcfc4; }
.messages-modal .conversation:hover { background: #d1e4dc; border-color: #769988; }
.messages-modal .conversation.selected { background: #b8dac9; border-color: #3d7b61; box-shadow: none; }
.messages-modal .conversation.selected:hover { background: #abd3bf; }
.messages-modal .conversation > .avatar { background: #d4e0f2; color: #354d78; }
.messages-modal .system-avatar { background: #176463; color: #fff; }
.messages-modal .ai-avatar { background: #354d78; color: #fff; }
.messages-modal .conversation[hidden], .conversation-search-empty[hidden] { display: none; }
.conversation-search-empty { color: var(--muted); text-align: center; padding: 20px 8px; font-size: 12px; }
.messages-modal .message-thread-heading { background: #dbeae2; }
.messages-modal .message-thread { background: #eef4f0; }
.messages-modal .message-compose { background: #e1ece6; }
.messages-modal .chat-bubble.own { background: #176463; color: #fff; border-color: #105453; }
.messages-modal .chat-bubble.own time { color: #d9eeeb; }
.messages-modal .system-message { padding: 14px; margin-bottom: 12px; border: 1px solid #a8c0b2; border-radius: 14px; background: #f9fcfa; }
.messages-modal .system-message.is-new { background: #d8e8df; border-left: 3px solid #176463; }

.profile-hero { border: 1px solid #769988; border-radius: 24px; overflow: hidden; background: var(--surface); box-shadow: 0 10px 30px #17372e15; }
.profile-cover { position: relative; display: flex; align-items: flex-start; justify-content: space-between; min-height: 140px; padding: 24px 28px; background: linear-gradient(115deg, #164b36, #176463 65%, #354d78); color: #fff; overflow: hidden; }
.profile-cover::after { content: ''; position: absolute; right: 8%; top: -90px; width: 290px; height: 290px; border: 45px solid #ffffff0c; border-radius: 50%; pointer-events: none; }
.profile-cover-label { font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.profile-cover > svg { width: 28px; height: 28px; opacity: .85; }
.profile-hero-body { padding: 0 28px 24px; }
.profile-hero .profile-card { position: relative; align-items: center; gap: 22px; margin: -34px 0 22px; padding: 0; }
.profile-hero .profile-card > .avatar { width: 100px; height: 100px; flex-shrink: 0; font-size: 36px; border: 5px solid var(--surface); background: #b8dac9; color: #164b36; box-shadow: 0 4px 12px #17372e20; }
.profile-hero .identity-copy { padding-top: 52px; min-width: 0; }
.profile-hero .identity-copy h1 { margin: 6px 0; font-size: 27px; letter-spacing: -.6px; overflow-wrap: anywhere; }
.profile-hero .identity-copy p { margin: 0 0 12px; overflow-wrap: anywhere; }
.profile-section-kicker { display: block; font-size: 9px; font-weight: 800; letter-spacing: 1px; color: #176463; margin-bottom: 7px; }
.profile-hero .role-label { background: #d3e7dd; color: #164b36; border: 1px solid #9ab9a8; }
.profile-hero .profile-icon { align-self: center; margin-top: 45px; width: 44px; height: 44px; border-color: var(--control-line); background: #dbeae2; }
.profile-social-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 20px; }
.profile-stats { display: flex; gap: 32px; }
.profile-stats > div { display: grid; gap: 5px; color: var(--ink); }
.profile-stats strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.profile-stats span { font-size: 11px; color: var(--muted); }
.profile-sections { display: grid; gap: 22px; margin-top: 22px; }
.cover-forest { background: linear-gradient(115deg, #164b36, #176463 65%, #354d78); }
.cover-ocean { background: radial-gradient(ellipse at 80% 100%, #30968e80, transparent 60%), linear-gradient(120deg, #183c6b, #087980); }
.cover-sunset { background: radial-gradient(circle at 75% 125%, #e2b957 0 24%, transparent 24.5%), linear-gradient(120deg, #633353, #ac5036); }
.cover-midnight { background: radial-gradient(circle at 75% 30%, #dbdbc8 0 5%, transparent 5.5%), linear-gradient(125deg, #1d2444, #4c427d); }
.profile-cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-cover.has-cover-image::after { inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: linear-gradient(#0006, transparent); }
.profile-cover-label, .cover-edit-button { position: relative; z-index: 1; }
.profile-cover.has-cover-image .profile-cover-label { background: #103327b3; padding: 6px 9px; border-radius: 7px; }
.cover-edit-button { display: grid; place-items: center; width: 44px; height: 44px; margin-top: -6px; background: #103327b3; color: #fff; border: 1px solid #ffffffa0; border-radius: 12px; }
.cover-edit-button:hover { background: #164b36; }
.cover-edit-button svg { width: 20px; height: 20px; }
.cover-preview { margin: 22px 0 16px; border: 1px solid var(--control-line); border-radius: 16px; overflow: hidden; }
.cover-preview .profile-cover { min-height: 150px; }
.cover-preset-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }
.cover-preset { display: grid; gap: 8px; padding: 8px; text-align: left; color: var(--ink); font-size: 12px; font-weight: 700; background: var(--tint); border: 1px solid var(--control-line); border-radius: 12px; }
.cover-preset[aria-pressed="true"] { background: var(--selected); border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.cover-swatch { display: block; height: 64px; border-radius: 7px; }
.cover-upload { display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; min-height: 44px; }
.profile-sections .friends-panel { margin: 0; border-top: 4px solid #176463; }
#profile-friends, #profile-budgets { scroll-margin-top: 20px; }
.friends-panel .profile-icon { background: #176463; border-color: #105453; color: #fff; }
.friends-panel .profile-icon:hover { background: #105453; }
.friend-card { flex-basis: 150px; background: #e2ecef; border: 1px solid #a4b9bf; padding: 18px 12px; gap: 10px; }
.friend-card:hover { background: #d1e3e7; border-color: #176463; }
.friend-card .avatar { background: #c6d8ef; color: #354d78; border-color: var(--surface); }
.friend-card-action { display: flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; color: #176463; padding-top: 7px; border-top: 1px solid #a4b9bf; }
.friend-card-action svg { width: 13px; height: 13px; }
#profile-budgets .budget-space { border-top: 4px solid #354d78; }
#profile-budgets .current-budget-card { background: #dce6f2; border-color: #8ba4bd; }

@media (max-width: 760px) {
  .messages-modal { padding: 0 0 max(8px, env(safe-area-inset-bottom)); }
  .messages-modal > .modal-heading { padding: 12px; }
  .messages-modal .modal-heading h2 { font-size: 18px; }
  .chat-brand-icon { width: 34px; height: 34px; }
  .chat-tools { padding: 12px 12px 0; }
  .chat-search { width: 100%; }
  .chat-search input { font-size: 16px; }
  .chat-tools-note { display: none; }
  .messages-modal.chat-open .chat-tools { display: none; }
  .messages-modal .message-layout { margin: 12px 10px 4px; }
  .messages-modal.chat-open .message-sidebar { background: #e3eee9; }
  .messages-modal.chat-open .conversation { border: 1px solid transparent; }
  .messages-modal.chat-open .conversation.selected { border-color: #3d7b61; }
  .messages-modal.chat-open .conversation-count { box-shadow: 0 0 0 2px #e3eee9; }
  .profile-cover { min-height: 120px; padding: 20px; }
  .profile-hero-body { padding: 0 18px 20px; }
  .profile-hero .profile-card { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 12px; margin-top: -38px; }
  .profile-hero .profile-card > .avatar { width: 86px; height: 86px; grid-column: 1; font-size: 30px; }
  .profile-hero .identity-copy { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }
  .profile-hero .identity-copy h1 { font-size: 24px; }
  .profile-hero .profile-icon { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
  .profile-social-bar { flex-wrap: wrap; gap: 18px; }
  .profile-stats { gap: 28px; }
  .profile-sections { gap: 18px; }
  .friend-card { flex-basis: 140px; }
}