.social-chat-layout{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2fr);gap:2rem;margin-top:2rem}.social-chat-layout section{min-width:0}#social-workspace form{display:grid;gap:12px;margin:18px 0}#social-workspace label{display:grid;gap:6px}#social-workspace input,#social-workspace textarea{font:inherit;padding:12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#101828}#social-workspace button{font:inherit;padding:10px 16px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#002fa7;cursor:pointer}#social-workspace button:disabled{opacity:.5;cursor:wait}#message-list{padding:0;list-style:none;display:grid;gap:12px;max-height:420px;overflow:auto}#message-list li{white-space:pre-wrap;overflow-wrap:anywhere;background:#f0f4ff;padding:14px;border-radius:12px}#conversation-list{list-style:none;padding:0;display:grid;gap:8px}#workspace-account{overflow-wrap:anywhere}#profile-form{max-width:600px}@media(max-width:720px){.social-chat-layout{grid-template-columns:1fr}}
.brand-logo{width:42px;height:42px;display:block;object-fit:contain;flex:0 0 auto}.wallet-logo{object-fit:contain}#matrix-social-workspace{border-top:1px solid var(--line);background:radial-gradient(circle at 95% 0,#e8efff,transparent 45%),var(--white);max-width:100%;overflow:hidden}#matrix-social-workspace>p{max-width:680px}#matrix-social-workspace [data-status]{background:var(--soft);color:var(--ink);border-left:3px solid var(--blue);padding:16px 20px;border-radius:0 12px 12px 0;overflow-wrap:anywhere}#matrix-social-workspace button{font:inherit;font-weight:650;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--blue);padding:12px 18px;min-height:46px;cursor:pointer;margin:6px 8px 6px 0}#matrix-social-workspace [data-connect],#matrix-social-workspace form button{background:var(--blue);color:var(--white);border-color:var(--blue)}#matrix-social-workspace button:focus-visible,#matrix-social-workspace input:focus-visible,#matrix-social-workspace textarea:focus-visible{outline:3px solid #94b2ff;outline-offset:3px}#matrix-social-workspace button:disabled{opacity:.5;cursor:wait}#matrix-social-workspace form{display:grid;gap:14px;max-width:740px;margin:28px 0}#matrix-social-workspace label{display:grid;gap:8px;font-size:15px;font-weight:600;color:var(--ink)}#matrix-social-workspace input,#matrix-social-workspace textarea{width:100%;font:inherit;border:1px solid var(--line);border-radius:12px;background:var(--white);padding:14px 16px;color:var(--ink);min-width:0}#matrix-social-workspace textarea{min-height:110px;resize:vertical}#matrix-social-workspace [data-messages]{list-style:none;padding:0;display:grid;gap:12px;max-height:420px;overflow:auto}#matrix-social-workspace [data-messages] li{background:#eef3ff;padding:18px;border-radius:14px;overflow-wrap:anywhere;white-space:pre-wrap}#matrix-social-workspace [data-devices]>div,#matrix-social-workspace [data-verification]>div{padding:14px 18px;margin:12px 0;background:var(--white);border:1px solid var(--line);border-radius:14px}#matrix-social-workspace details{font-size:13px;color:var(--muted);max-width:740px}#matrix-social-workspace details p{font-size:13px}#matrix-social-workspace summary{cursor:pointer}@media(max-width:720px){#matrix-social-workspace{padding:48px 20px}#matrix-social-workspace h2{font-size:34px}#matrix-social-workspace>button{width:100%;margin:6px 0}}

/* Consumer private chat: inherits Social blue, logo and font. */
#matrix-social-workspace .chat-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}#matrix-social-workspace .chat-heading h2{margin:20px 0 12px}#matrix-social-workspace .chat-heading p{color:var(--muted);line-height:1.6}.chat-wordmark{display:flex;align-items:center;gap:12px;font-weight:750;font-size:14px;letter-spacing:.04em}.chat-wordmark img{display:block;object-fit:contain;flex:none}.chat-connection-label{flex:none;background:var(--soft);border:1px solid var(--line);padding:10px 14px;border-radius:999px;font-size:13px;font-weight:700;max-width:100%;overflow-wrap:anywhere}#matrix-social-workspace[data-chat-phase=ready] .chat-connection-label{color:var(--success)}.chat-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:20px 0 28px}.chat-actions a{color:var(--blue);font-size:14px;font-weight:650;overflow-wrap:anywhere}.chat-workspace-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2fr);gap:28px}.chat-sidebar,.chat-conversation{min-width:0}.chat-sidebar{padding:22px;background:var(--soft);border-radius:16px}.chat-sidebar h3{font-size:17px;margin:0 0 12px}#matrix-social-workspace .chat-sidebar form{margin:16px 0 0}#matrix-social-workspace .chat-sidebar button{width:100%;margin:4px 0;white-space:normal;overflow-wrap:anywhere}.chat-conversation{padding:22px;border:1px solid var(--line);border-radius:16px}#matrix-social-workspace .chat-conversation [data-messages]{min-height:160px;margin:0 0 20px}#matrix-social-workspace .chat-conversation [data-send-form]{margin:0;max-width:none}.chat-composer-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:end;justify-content:space-between}.chat-file-label{min-width:0;flex:1 1 180px}#matrix-social-workspace input[type=file]{max-width:100%;font-size:13px;padding:10px}#matrix-social-workspace input[type=file]::file-selector-button{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--soft);color:var(--blue);margin-right:10px}.chat-device-section{margin-top:28px}.chat-device-heading{display:flex;gap:12px;align-items:center;justify-content:space-between}.chat-device-heading h3{margin:0}.chat-connection-details{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}#matrix-social-workspace button:disabled{opacity:.6;cursor:not-allowed}#matrix-social-workspace .chat-actions button{margin:0}#matrix-social-workspace [data-devices] p{overflow-wrap:anywhere}
.chat-confirmation{position:fixed;width:min(480px,calc(100% - 32px));max-height:calc(100svh - 32px);overflow:auto;padding:28px;border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:18px;background:var(--white);color:var(--ink);font:inherit;box-shadow:0 24px 80px #11182726}.chat-confirmation::backdrop{background:#11182780;backdrop-filter:blur(4px)}.chat-confirmation[data-phase=progress]{inset:auto 20px 20px auto;margin:0;z-index:20}.chat-confirm-brand{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:750}.chat-confirm-brand img{object-fit:contain;flex:none}.chat-confirmation h3{font-size:24px;line-height:1.25;margin:24px 0 12px}.chat-confirmation p{line-height:1.6;color:var(--muted);overflow-wrap:anywhere}.chat-confirm-context{display:grid;grid-template-columns:90px minmax(0,1fr);gap:10px 14px;padding:16px;background:var(--soft);border-radius:12px;font-size:13px}.chat-confirm-context dt{color:var(--muted)}.chat-confirm-context dd{margin:0;overflow-wrap:anywhere}.chat-confirm-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}#matrix-social-workspace .chat-confirm-actions button{margin:0;min-height:48px;width:100%;padding:12px;white-space:normal;overflow-wrap:anywhere}#matrix-social-workspace .chat-confirm-actions .chat-button-danger{background:var(--blue);border-color:var(--blue);color:var(--white)}.chat-confirm-actions button:only-child{grid-column:1/-1}
@media(max-width:720px){#matrix-social-workspace .chat-heading{display:block}#matrix-social-workspace .chat-heading h2{font-size:30px;overflow-wrap:anywhere}.chat-connection-label{display:inline-block;margin:12px 0}.chat-workspace-grid{grid-template-columns:minmax(0,1fr);gap:18px}.chat-sidebar,.chat-conversation{padding:18px}.chat-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.chat-actions a{grid-column:1/-1}#matrix-social-workspace .chat-actions button{width:100%;padding:12px 8px;overflow-wrap:anywhere}.chat-composer-actions{display:grid;grid-template-columns:minmax(0,1fr)}#matrix-social-workspace .chat-composer-actions button{margin:0;width:100%}.chat-device-heading{flex-wrap:wrap}.chat-confirmation{padding:22px}.chat-confirmation[data-phase=progress]{inset:auto 16px 16px;margin:0}.chat-confirm-context{grid-template-columns:minmax(0,1fr);gap:6px}.chat-confirm-context dd{margin-bottom:8px}.chat-confirm-actions{grid-template-columns:minmax(0,1fr)}}

/* Contact consent surfaces are appended to body, outside workspace panels. */
dialog.contact-review,
dialog.contact-camera {
  --contact-blue: #002FA7;
  box-sizing: border-box;
  width: min(32rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: clamp(1rem, 4vw, 1.75rem);
  overflow: auto;
  overflow-wrap: anywhere;
  color: #102044;
  background: #fff;
  border: 1px solid #c9d6ef;
  border-radius: 1.25rem;
  box-shadow: 0 1.5rem 5rem #002fa72b;
  font: inherit;
}
dialog.contact-review::backdrop,
dialog.contact-camera::backdrop {
  background: linear-gradient(135deg, #061a4a85, #002fa759);
}
dialog.contact-review h3,
dialog.contact-camera h3 {
  margin: 0 0 1rem;
  color: var(--contact-blue);
}
dialog.contact-review p,
dialog.contact-camera p {
  margin: 0 0 1.25rem;
  line-height: 1.55;
}
dialog.contact-review button,
dialog.contact-camera button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 92px;
  max-width: 100%;
  margin: .25rem .5rem .25rem 0;
  padding: .65rem 1rem;
  border: 1px solid var(--contact-blue);
  border-radius: .75rem;
  background: var(--contact-blue);
  color: #fff;
  font: inherit;
  font-weight: 650;
  line-height: 1.25;
  white-space: normal;
  cursor: pointer;
}
dialog.contact-review button:first-of-type,
dialog.contact-camera button:last-of-type {
  color: var(--contact-blue);
  background: #fff;
}
dialog.contact-review button:focus-visible,
dialog.contact-camera button:focus-visible {
  outline: 3px solid var(--contact-blue);
  outline-offset: 3px;
}
dialog.contact-camera video {
  display: block;
  margin: 0 0 1rem;
  border-radius: .75rem;
  background: #e8effb;
}
dialog.contact-review label { display: block; margin: 0 0 1rem; line-height: 1.5; }
dialog.contact-review textarea { box-sizing: border-box; display: block; width: 100%; min-height: 96px; margin-top: .5rem; padding: .75rem; color: #102044; background: #fff; border: 1px solid #9cafd1; border-radius: .75rem; font: inherit; resize: vertical; }
dialog.contact-review textarea:focus-visible { outline: 3px solid var(--contact-blue); outline-offset: 3px; }

/* Native select stays accessible and matches the verified workspace controls. */
#matrix-social-workspace select {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #002fa7;
  border-radius: 8px;
  background: #fff;
  color: #002fa7;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
}
#matrix-social-workspace select:focus-visible {
  outline: 3px solid #002fa7;
  outline-offset: 3px;
}
#matrix-social-workspace select:disabled {
  opacity: .65;
  cursor: not-allowed;
}
:root { --social-journey-blue: #002fa7; }
#profile-share-panel { display: grid; justify-items: start; gap: .75rem; margin: 1.5rem 0; }
#profile-share-panel img { width: min(240px, 100%); height: auto; aspect-ratio: 1; }
#profile-share-panel input { width: 100%; }
#privacy-form fieldset { display: grid; gap: .8rem; border: 1px solid #d7def0; padding: 1rem; }
#privacy-form label { display: flex; align-items: center; gap: .6rem; }
#privacy-form input[type="checkbox"] { width: 20px; height: 20px; }
#invitation-list { display: grid; gap: 1rem; padding: 0; list-style: none; }
#invitation-list li { display: grid; gap: .6rem; }
#invitation-list input { width: 100%; }
#matrix-social-workspace, #social-moments, #people-panel, #profile-form {
  scroll-margin-top: 5rem;
}
.topbar nav a:focus-visible, #contact-list button:focus-visible {
  outline: 2px solid var(--social-journey-blue);
  outline-offset: 5px;
}
[name="matrixPeer"] { width: 100%; min-height: 44px; }
#contact-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; }
@media (max-width: 700px) {
  body { padding-bottom: 5rem; }
  .topbar nav { display: flex; position: fixed; inset: auto 0 0; z-index: 50; justify-content: space-around; padding: .9rem .5rem calc(.9rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid #d7def0; }
  .topbar nav a { min-height: 32px; color: var(--social-journey-blue); }
}