.groups-hero,.group-detail-hero,.group-form-wrap{background:linear-gradient(135deg,rgba(22,28,58,.97),rgba(74,42,112,.94));color:#fff;border-radius:22px;padding:28px;margin-bottom:24px;border:1px solid rgba(174,145,255,.25);box-shadow:0 12px 34px rgba(16,20,49,.13)}
.groups-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.groups-hero h1,.group-detail-hero h1,.group-form-wrap h1{margin:4px 0 8px;font-size:clamp(1.7rem,3vw,2.4rem)}.groups-hero p,.group-detail-hero p,.form-intro{color:rgba(255,255,255,.78);margin:0}.eyebrow{font-size:.72rem;letter-spacing:.17em;font-weight:800;color:#b9a4ff!important;margin:0 0 8px!important}.group-primary{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;background:linear-gradient(135deg,#a78bfa,#ec4899);color:#fff!important;text-decoration:none;font-weight:750;padding:12px 17px;cursor:pointer;box-shadow:0 7px 20px rgba(142,90,230,.25)}.group-primary:hover{filter:brightness(1.06)}.group-section{margin:24px 0}.group-section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}.group-section-heading h2{margin:0 0 4px;font-size:1.2rem}.group-section-heading p{margin:0;color:var(--muted,#7c8298);font-size:.9rem}.group-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:14px}.group-card{background:var(--panel,#fff);border:1px solid var(--border,#e8e8f2);border-radius:17px;padding:18px;min-width:0;box-shadow:0 6px 22px rgba(29,31,70,.04)}.group-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.group-symbol{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:13px;background:rgba(139,92,246,.12);font-size:1.25rem}.group-status{font-size:.68rem;letter-spacing:.06em;font-weight:800;color:#7060a4;background:#f0ecff;border-radius:999px;padding:6px 9px}.status-approved{background:#dcfce7;color:#166534}.status-pending{background:#fef3c7;color:#92400e}.status-rejected{background:#fee2e2;color:#991b1b}.group-card h3{margin:15px 0 7px;font-size:1.08rem}.group-card h3 a{color:var(--text,#25243a);text-decoration:none}.group-card h3 a:hover{color:var(--accent)}.group-card p{min-height:40px;margin:0;color:var(--muted,#7c8298);font-size:.9rem;line-height:1.5;overflow-wrap:anywhere}.group-card-bottom{border-top:1px solid var(--border,#eee);margin-top:16px;padding-top:12px;display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:.78rem;color:var(--muted,#7c8298)}.group-card-bottom a{color:var(--accent);text-decoration:none;font-weight:750}.group-empty{padding:22px;border:1px dashed var(--border-strong);background:rgba(139,92,246,.045);border-radius:14px;color:var(--muted,#77788c);grid-column:1/-1}.group-back{display:inline-block;color:var(--accent);text-decoration:none;font-weight:750;margin:0 0 16px}.group-detail-hero{margin-bottom:22px}.group-detail-hero h1{margin-top:14px}.group-meta{margin-top:15px;font-size:.85rem;color:rgba(255,255,255,.72)}.group-detail-hero form{margin-top:18px}.member-note{margin-top:18px!important;background:rgba(255,255,255,.1);padding:12px;border-radius:10px}.group-form-wrap{max-width:760px;margin:0 auto 24px}.group-form-wrap .group-back{color:#d5c9ff}.group-form{display:grid;gap:10px;margin-top:24px}.group-form label{font-weight:750;margin-top:8px}.group-form input,.group-form textarea,.group-form select{width:100%;padding:12px 13px;border:1px solid rgba(255,255,255,.2);border-radius:11px;background:rgba(255,255,255,.09);color:#fff;font:inherit;box-sizing:border-box}.group-form select option{color:var(--text);background:var(--surface)}.group-form input::placeholder,.group-form textarea::placeholder{color:rgba(255,255,255,.55)}.group-form .group-primary{justify-self:start;margin-top:8px}.form-note{color:rgba(255,255,255,.72);font-size:.85rem}.request-list{display:grid;gap:10px}.request-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 16px;border:1px solid var(--border,#e8e8f2);border-radius:13px;background:var(--panel,#fff)}.request-row small{display:block;color:var(--muted,#7c8298);margin-top:4px}.request-actions{display:flex;gap:8px}.request-actions form{margin:0}.request-approve,.request-reject{border:0;border-radius:9px;padding:9px 12px;font-weight:750;cursor:pointer}.request-approve{background:#dcfce7;color:#166534}.request-reject{background:#fee2e2;color:#991b1b}.leave-form{margin-top:18px}.leave-form button{background:transparent;border:1px solid #ef4444}@media(max-width:640px){.groups-hero,.group-detail-hero,.group-form-wrap{padding:20px;border-radius:17px}.request-row{align-items:flex-start;flex-direction:column}.request-actions{width:100%}.request-actions form{flex:1}.request-actions button{width:100%}.group-card-bottom{align-items:flex-start;flex-direction:column}}


/* OurMinds chat and timed Q&A */
.chat-shell{margin-top:24px;border:1px solid var(--border);border-radius:18px;padding:18px;background:var(--surface);color:var(--text)}
.chat-top,.chat-message-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.chat-top h2{margin:0}.chat-top p,.chat-message-head{color:var(--text-muted);font-size:.9rem}
.chat-secure{background:#edf8f1;color:#187347;border-radius:99px;padding:6px 10px;font-size:.8rem}
.chat-tools{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.chat-shell button{border:1px solid var(--border-strong);border-radius:9px;padding:8px 12px;background:var(--surface);color:var(--text);cursor:pointer}
.chat-composer{padding:13px;background:var(--surface-2);border-radius:12px;margin-bottom:14px}.chat-composer form{display:grid;gap:9px}.chat-composer label{font-weight:600}
.chat-composer input,.chat-composer textarea,.chat-composer select{box-sizing:border-box;width:100%;border:1px solid var(--border-strong);border-radius:8px;padding:9px;background:var(--surface);color:var(--text);font:inherit}
.chat-composer textarea{min-height:65px}.chat-options-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.chat-feed{display:flex;flex-direction:column;gap:12px;max-height:680px;overflow:auto}
.chat-message{border:1px solid var(--border);border-radius:13px;padding:13px;overflow-wrap:anywhere}.chat-message-head{justify-content:flex-start;margin-bottom:8px}.chat-message-body{white-space:pre-wrap}.chat-reply-preview{padding:7px;border-left:3px solid #94a3b8;background:var(--surface-2)}
.chat-message-actions{display:flex;gap:8px;margin-top:9px}.chat-interactive{margin-top:10px;padding:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:11px}.chat-interactive h3{margin:0 0 8px;font-size:1rem}.chat-timer{font-weight:700;color:#9a3412}.chat-choice-list{display:grid;gap:7px}.chat-choice{display:flex;align-items:center;gap:9px;border:1px solid var(--border);background:var(--surface);padding:8px;border-radius:8px}.chat-choice input{width:auto}.chat-choice small{margin-left:auto;color:var(--text-muted)}.chat-correct{background:#f0fdf4;border-color:#16a34a}.chat-result{font-weight:700}.chat-attachment{display:inline-block;padding:8px;background:var(--surface-2);border-radius:8px}
@media(max-width:600px){.chat-shell{padding:11px}.chat-options-grid{grid-template-columns:1fr}.chat-top{align-items:flex-start;flex-direction:column}}


/* OurMinds group chat: respect hidden form state */
[hidden] {
  display: none !important;
}

.chat-composer form:not([hidden]) {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.chat-composer form input,
.chat-composer form textarea,
.chat-composer form select {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border:1px solid var(--border-strong);
  border-radius: 9px;
  background:var(--surface);
  color:var(--text);
  font: inherit;
}

.chat-composer form button {
  width: fit-content;
  padding: 10px 16px;
  border:0;
  border-radius: 9px;
  background:linear-gradient(100deg, #1769ff, #8057ff);
  color:#fff;
  font-weight: 700;
  cursor: pointer;
}

.chat-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.chat-tools button {
  padding: 9px 14px;
  border:1px solid #d0d9ed;
  border-radius: 10px;
  background:var(--surface);
  color:#26375c;
  font-weight: 650;
  cursor: pointer;
}

.chat-tools button:hover {
  background:var(--surface-2);
  border-color:#8daaff;
}

/* Inline images in OurMinds group chat */
.chat-image-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 8px 0;
}
.chat-inline-image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 560px);
  max-height: 420px;
  object-fit: contain;
  border:1px solid var(--border);
  border-radius: 12px;
  background:#f5f7fc;
}
#chat-file-form[hidden],
#chat-message-form[hidden],
#chat-poll-form[hidden],
#chat-quiz-form[hidden] {
  display: none !important;
}

/* Group chat: always-visible message composer and inline image previews */
#chat-message-form { display: grid !important; gap: 12px; }
#chat-poll-form[hidden],
#chat-quiz-form[hidden],
#chat-file-form[hidden] { display: none !important; }
.chat-image-link { display: block; width: 100%; margin: 10px 0; }
.chat-inline-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 650px;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}

/* WhatsApp-style group chat layout */
#om-chat {
  display: flex;
  flex-direction: column;
  height: min(75vh, 850px);
  min-height: 500px;
  overflow: hidden;
}

#om-chat .chat-top,
#om-chat .chat-tools {
  flex-shrink: 0;
}

#om-chat .chat-composer {
  order: 3;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 5;
  background:var(--surface-2);
  padding: 12px;
  border-top:1px solid #dce5f2;
}

#om-chat #chat-feed {
  order: 2;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  scroll-behavior: smooth;
}

#om-chat #chat-message-form {
  display: grid !important;
  gap: 10px;
}

#om-chat #chat-poll-form[hidden],
#om-chat #chat-quiz-form[hidden],
#om-chat #chat-file-form[hidden] {
  display: none !important;
}

#om-chat .chat-inline-image {
  display: block;
  max-width: 100%;
  max-height: 650px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 700px) {
  #om-chat {
    height: 75vh;
    min-height: 400px;
  }
}

/* Put chat action buttons beside Send message */
#om-chat .chat-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 12px 12px;
}

#om-chat .chat-composer {
  display: flex;
  flex-direction: column;
}

#om-chat #chat-message-form {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

#om-chat #chat-message-form textarea {
  flex: 1 1 300px;
  min-width: 150px;
}

#om-chat #chat-message-form button[type="submit"] {
  order: 1;
  flex: 0 0 auto;
}

#om-chat .chat-tools button {
  white-space: nowrap;
}


/* Put chat action buttons beside Send message */
#om-chat .chat-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 12px 12px;
}

#om-chat .chat-composer {
  display: flex;
  flex-direction: column;
}

#om-chat #chat-message-form {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

#om-chat #chat-message-form textarea {
  flex: 1 1 300px;
  min-width: 150px;
}

#om-chat #chat-message-form button[type="submit"] {
  order: 1;
  flex: 0 0 auto;
}

#om-chat .chat-tools button {
  white-space: nowrap;
}


/* OurMinds modern chat GUI */
#om-chat {
  display: flex;
  flex-direction: column;
  height: min(78vh, 900px);
  min-height: 480px;
  overflow: hidden;
  border:1px solid #dce5f2;
  border-radius: 18px;
  background:var(--surface);
  box-shadow: 0 8px 28px rgba(20, 45, 90, .08);
}

#om-chat .chat-top {
  flex-shrink: 0;
  padding: 16px 20px;
  background:var(--surface);
  border-bottom:1px solid #e5ebf5;
}

#om-chat .chat-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
}

#om-chat .chat-composer {
  order: 3;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
  padding: 12px 16px;
  background:var(--surface);
  border-top:1px solid #e2e9f4;
  box-shadow: 0 -5px 18px rgba(25, 45, 80, .04);
}

#om-chat #chat-message-form {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#om-chat #chat-body {
  flex: 1 1 220px;
  width: auto;
  min-width: 120px;
  min-height: 46px;
  max-height: 120px;
  resize: vertical;
  padding: 13px 16px;
  border:1px solid #d6e0f2;
  border-radius: 15px;
  background:#f8faff;
  font: inherit;
}

#om-chat .chat-send-button {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 18px;
  border:0;
  border-radius: 13px;
  color:#fff;
  font-weight: 600;
  background:linear-gradient(120deg, #2765ff, #8052f5);
  cursor: pointer;
}

#om-chat .chat-attach-shortcut {
  min-width: 44px;
  min-height: 44px;
  border:1px solid #dce5f2;
  border-radius: 13px;
  background:var(--surface);
  font-size: 20px;
  cursor: pointer;
}

#om-chat .chat-tools button {
  min-height: 44px;
  padding: 0 13px;
  border:1px solid #d7e1f2;
  border-radius: 13px;
  background:var(--surface);
  color:#183153;
  font-weight: 600;
  cursor: pointer;
}

#om-chat .chat-tools button:hover,
#om-chat .chat-attach-shortcut:hover {
  background:var(--surface-2);
  border-color:#9cb8fa;
}

#om-chat #chat-feed {
  order: 2;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  background:#f3f7fd;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

#om-chat .chat-message {
  max-width: 88%;
  margin: 0 0 14px;
  padding: 12px 14px;
  border:1px solid #e0e8f4;
  border-radius: 16px;
  background:var(--surface);
  box-shadow: 0 2px 6px rgba(25, 45, 80, .035);
  overflow-wrap: anywhere;
}

#om-chat .chat-message-head {
  margin-bottom: 7px;
  color:#627795;
  font-size: 12px;
}

#om-chat .chat-message-body {
  margin: 5px 0 10px;
  white-space: pre-wrap;
  line-height: 1.55;
}

#om-chat .chat-image-link {
  display: block;
  max-width: 100%;
  margin: 10px 0;
}

#om-chat .chat-inline-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 560px;
  object-fit: contain;
  border-radius: 12px;
}

#om-chat .chat-attachment {
  display: inline-block;
  margin: 5px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background:#eef3fb;
  overflow-wrap: anywhere;
}

#om-chat #chat-poll-form[hidden],
#om-chat #chat-quiz-form[hidden],
#om-chat #chat-file-form[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  #om-chat {
    height: 75vh;
    min-height: 420px;
  }

  #om-chat .chat-tools {
    justify-content: flex-start;
    width: 100%;
  }

  #om-chat .chat-tools button {
    flex: 1 1 auto;
  }

  #om-chat .chat-message {
    max-width: 100%;
  }
}

/* Compact WhatsApp-style chat spacing */
#om-chat {
  height: min(78vh, 850px);
  min-height: 450px;
  border-radius: 16px;
}

#om-chat .chat-top {
  padding: 10px 18px;
}

#om-chat .chat-top h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

#om-chat .chat-top p {
  margin: 0;
  font-size: 13px;
}

#om-chat .chat-composer {
  padding: 10px 12px;
}

#om-chat #chat-message-form {
  gap: 8px;
}

#om-chat #chat-body {
  min-height: 44px;
  height: 44px;
  max-height: 100px;
  resize: vertical;
  padding: 11px 14px;
}

#om-chat .chat-send-button,
#om-chat .chat-tools button,
#om-chat .chat-attach-shortcut {
  min-height: 42px;
}

#om-chat #chat-feed {
  padding: 14px;
}

#om-chat .chat-message {
  margin-bottom: 10px;
  padding: 10px 12px;
}


/* Single attachment menu for poll, quiz and file upload */
#om-chat .chat-attach-menu {
  position: relative;
  flex: 0 0 auto;
}
#om-chat .chat-attach-menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border:1px solid #d7e1f2;
  border-radius: 13px;
  background:var(--surface);
  color:#183153;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
#om-chat .chat-attach-menu summary::-webkit-details-marker {
  display: none;
}
#om-chat .chat-attach-menu[open] summary {
  background:var(--surface-2);
  border-color:#9cb8fa;
}
#om-chat .chat-attach-options {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  display: grid;
  gap: 5px;
  min-width: 205px;
  padding: 8px;
  border:1px solid #dce5f2;
  border-radius: 14px;
  background:var(--surface);
  box-shadow: 0 10px 30px rgba(20, 45, 90, .16);
}
#om-chat .chat-attach-options button {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border:0;
  border-radius: 9px;
  background:var(--surface);
  text-align: left;
  cursor: pointer;
}
#om-chat .chat-attach-options button:hover {
  background:var(--surface-2);
}

/* Refine attachment menu placement and spacing */
#om-chat .chat-composer {
  position: relative;
  z-index: 20;
  overflow: visible;
}

#om-chat .chat-attach-menu {
  position: relative;
  z-index: 25;
}

#om-chat .chat-attach-options {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 100;
  min-width: 220px;
  padding: 8px;
  border:1px solid #dce5f2;
  border-radius: 14px;
  background:var(--surface);
  box-shadow: 0 12px 32px rgba(20, 45, 90, .18);
}

#om-chat .chat-attach-options button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  text-align: left;
  border-radius: 9px;
}

#om-chat .chat-attach-options button:hover {
  background:var(--surface-2);
}


/* WhatsApp-inspired conversation bubbles */
#om-chat {
  background:var(--surface);
  border-radius: 18px;
  overflow: hidden;
}

#om-chat .chat-top {
  padding: 12px 18px;
  border-bottom:1px solid #e2e9f2;
}

#om-chat #chat-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:radial-gradient(circle at 15% 20%, rgba(110,140,180,.06) 0 2px, transparent 3px),
    radial-gradient(circle at 75% 65%, rgba(110,140,180,.05) 0 2px, transparent 3px),
    #edf2f7;
  background-size: 34px 34px, 46px 46px, auto;
  padding: 18px;
}

#om-chat .chat-message {
  display: block;
  width: fit-content;
  max-width: min(76%, 720px);
  margin: 0;
  padding: 10px 13px;
  border:1px solid #e0e7ef;
  border-radius: 15px;
  background:var(--surface);
  box-shadow: 0 1px 2px rgba(20,40,70,.06);
  overflow-wrap: anywhere;
}

#om-chat .chat-message-own {
  align-self: flex-end;
  background:#dcf8d8;
  border-color:#c7edc1;
  border-radius: 15px 15px 4px 15px;
}

#om-chat .chat-message:not(.chat-message-own) {
  align-self: flex-start;
  border-radius: 15px 15px 15px 4px;
}

#om-chat .chat-message-head {
  font-size: 12px;
  color:#657b91;
  margin-bottom: 5px;
}

#om-chat .chat-message-body {
  margin: 4px 0 8px;
  line-height: 1.5;
  white-space: pre-wrap;
}

#om-chat .chat-message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

#om-chat .chat-inline-image {
  max-width: min(100%, 480px);
  max-height: 400px;
  border-radius: 10px;
}

#om-chat .chat-attachment {
  display: block;
  padding: 12px;
  margin-top: 8px;
  border-radius: 10px;
  background:#edf2fa;
}

#om-chat .chat-composer {
  background:var(--surface);
  border-top:1px solid #dfe7f1;
  padding: 12px;
}

@media (max-width: 700px) {
  #om-chat #chat-feed {
    padding: 10px;
  }

  #om-chat .chat-message {
    max-width: 92%;
  }
}

/* Compact reply arrow in the top-right of each chat bubble */
#om-chat .chat-message {
  position: relative;
  padding-top: 30px;
}

#om-chat .chat-reply-icon {
  position: absolute;
  top: 5px;
  right: 7px;
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border:0;
  border-radius: 50%;
  background:transparent;
  color:#6b7f98;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

#om-chat .chat-reply-icon:hover {
  background:rgba(80, 110, 160, .12);
  color:#285df5;
}

#om-chat .chat-message-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

#om-chat .chat-like-button {
  border:1px solid #d5e0ee;
  border-radius: 10px;
  background:rgba(255,255,255,.75);
  padding: 6px 10px;
  cursor: pointer;
}


/* Centered group icon and group name */
#om-chat .chat-top-centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 88px;
  padding: 12px 18px;
  text-align: center;
  background:var(--surface);
  border-bottom:1px solid #e2e9f2;
}

#om-chat .chat-top-centered h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color:#142747;
}

#om-chat .chat-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:linear-gradient(135deg, #2865ff, #8150f5);
  color:#fff;
  font-size: 20px;
}

/* Full-screen group chat */
#om-chat .chat-top-centered {
  position: relative;
}

#om-chat .chat-fullscreen-btn {
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 8px 12px;
  border:1px solid #d7e1f2;
  border-radius: 10px;
  background:var(--surface);
  color:#183153;
  font-weight: 600;
  cursor: pointer;
}

#om-chat .chat-fullscreen-btn:hover {
  background:var(--surface-2);
  border-color:#9cb8fa;
}

#om-chat:fullscreen,
#om-chat.chat-fullscreen-fallback {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  border:0 !important;
  border-radius: 0 !important;
  background:var(--surface) !important;
}

#om-chat:fullscreen #chat-feed,
#om-chat.chat-fullscreen-fallback #chat-feed {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

#om-chat:fullscreen .chat-composer,
#om-chat.chat-fullscreen-fallback .chat-composer {
  flex-shrink: 0 !important;
  padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
}

#om-chat:fullscreen .chat-fullscreen-btn {
  position: absolute;
  right: 14px;
  top: 14px;
}

@media (max-width: 700px) {
  #om-chat .chat-fullscreen-btn {
    right: 8px;
    top: 8px;
    padding: 7px 9px;
    font-size: 12px;
  }
}

/* Group icon and cover customization */
.group-detail-hero.has-group-cover {
  background-image:
    linear-gradient(115deg, rgba(22,28,58,.88), rgba(74,42,112,.72)),
    var(--group-cover-url);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.group-custom-icon {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 16px;
  border:2px solid rgba(255,255,255,.75);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

.group-customize-panel {
  margin: 18px 0 24px;
  padding: 22px;
  border:1px solid var(--border, #e4e8f2);
  border-radius: 16px;
  background:var(--panel, #fff);
}

.group-customize-panel h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}

.group-customize-panel p {
  color:var(--muted, #7c8298);
  margin: 0 0 16px;
  font-size: .9rem;
}

.group-customize-form {
  display: grid;
  gap: 10px;
  max-width: 640px;
}

.group-customize-form label {
  font-weight: 700;
  margin-top: 6px;
}

.group-customize-form input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border:1px solid var(--border, #e4e8f2);
  border-radius: 10px;
  background:var(--panel, #fff);
}

.group-customize-form .group-primary {
  justify-self: start;
  margin-top: 8px;
}

/* Edit group appearance button on cover */
.group-detail-hero {
  position: relative;
}

.group-cover-edit {
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 3;
  padding: 10px 15px;
  border:1px solid rgba(255,255,255,.55);
  border-radius: 10px;
  background:rgba(255,255,255,.94);
  color:#27345b;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

.group-cover-edit:hover {
  background:var(--surface);
  transform: translateY(-1px);
}

.group-customize-dialog {
  width: min(620px, calc(100% - 32px));
  max-height: 85vh;
  overflow-y: auto;
  padding: 0;
  border:0;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

.group-customize-dialog::backdrop {
  background:rgba(12,20,44,.62);
  backdrop-filter: blur(4px);
}

.group-customize-dialog .group-customize-panel {
  margin: 0;
  border:0;
  border-radius: 18px 18px 0 0;
}

.group-customize-close {
  display: block;
  margin: 0;
  padding: 12px 22px 18px;
  width: 100%;
  border:0;
  border-top:1px solid #e8ebf3;
  background:var(--surface);
  color:#39415b;
  font-weight: 700;
  cursor: pointer;
}

/* Keep the visibility badge and Edit Profile button separate */
.group-detail-hero .group-status {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 4;
}

.group-detail-hero .group-cover-edit {
  top: 66px;
  right: 22px;
  z-index: 4;
}


/* Group invitations */
.group-invitations{padding:20px;border:1px solid var(--border,#e8e8f2);border-radius:16px;background:var(--panel,#fff)}
.invite-create-form{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:16px 0}
.invite-create-form label,.invite-new-link label{display:block;font-weight:700;margin-bottom:7px}
.invite-create-form select,.invite-link-row input{min-width:0;padding:11px 12px;border:1px solid var(--border,#ddd);border-radius:10px;background:var(--panel,#fff);color:var(--text,#25243a);font:inherit}
.invite-new-link{margin:18px 0;padding:14px;border:1px solid var(--border,#e8e8f2);border-radius:12px}
.invite-link-row{display:flex;gap:8px;flex-wrap:wrap}
.invite-link-row input{flex:1;min-width:220px}
.invite-list{margin-top:14px}
@media(max-width:640px){.invite-create-form,.invite-link-row{align-items:stretch;flex-direction:column}.invite-create-form>*{width:100%;box-sizing:border-box}.invite-link-row input{width:100%;box-sizing:border-box}}


/* Collapsible group invitation history */
.invite-history {
  margin-top: 18px;
  border:1px solid var(--border, #e8e8f2);
  border-radius: 12px;
  background:var(--panel, #fff);
}
.invite-history > summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 750;
  color:var(--text, #25243a);
  list-style-position: inside;
}
.invite-history[open] > summary {
  border-bottom:1px solid var(--border, #e8e8f2);
}
.invite-history .invite-list {
  padding: 12px;
}

/* OURMINDS SHARE INVITATION MODAL - PERMANENT FIX */
#invite-share-modal.invite-share-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background:rgba(10, 20, 45, 0.72);
    overflow-y: auto;
}

#invite-share-modal.invite-share-overlay.is-open {
    display: flex !important;
}

#invite-share-modal .invite-share-card {
    position: relative;
    width: min(520px, 100%);
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    margin: auto;
    padding: 28px;
    box-sizing: border-box;
    background:var(--surface);
    color:#172554;
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

#invite-share-modal .invite-share-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border:0;
    border-radius: 50%;
    background:var(--surface-2);
    color:#172554;
    font-size: 24px;
    cursor: pointer;
}

#invite-share-modal .invite-share-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0;
}

#invite-share-modal .invite-share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 125px;
    padding: 14px 8px;
    border:1px solid var(--border);
    border-radius: 14px;
    background:var(--surface-2);
    color:#172554;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
}

#invite-share-modal .invite-share-option:hover {
    background:#eff6ff;
    border-color:#93c5fd;
}

#invite-share-modal .invite-share-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 25px;
}

#invite-share-modal .whatsapp-logo {
    background:#dcfce7;
}

#invite-share-modal .telegram-logo {
    background:#dbeafe;
}

#invite-share-modal .email-logo {
    background:#f3e8ff;
}

#invite-share-modal .invite-share-option small {
    font-size: 11px;
    color:var(--text-muted);
}

#invite-share-modal .invite-share-copy label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
}

#invite-share-modal .invite-share-copy-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

#invite-share-modal #invite-share-url {
    flex: 1;
    width: 0;
    min-width: 0;
    padding: 10px;
    border:1px solid var(--border-strong);
    border-radius: 9px;
    background:var(--surface);
    color:#172554;
    font: inherit;
    font-size: 12px;
}

#invite-share-modal #invite-share-copy-btn {
    padding: 10px 14px;
    border:0;
    border-radius: 9px;
    background:#d1fae5;
    color:#065f46;
    font-weight: 600;
    cursor: pointer;
}

#invite-share-modal #invite-share-feedback {
    min-height: 16px;
    margin: 6px 0;
    color:#047857;
    font-size: 12px;
}

#invite-share-modal .invite-share-footer {
    margin-top: 12px;
    color:var(--text-muted);
    font-size: 12px;
}

body.invite-modal-open {
    overflow: hidden;
}

@media (max-width: 480px) {
    #invite-share-modal .invite-share-card {
        padding: 24px 16px;
    }

    #invite-share-modal .invite-share-options {
        gap: 6px;
    }

    #invite-share-modal .invite-share-option {
        padding: 10px 4px;
        font-size: 11px;
    }

    #invite-share-modal .invite-share-copy-row {
        flex-wrap: wrap;
    }

    #invite-share-modal #invite-share-url {
        width: 100%;
        flex-basis: 100%;
    }
}

/* OurMinds group header layout fix: keep uploaded icon compact and cover as background */
.group-detail-hero {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-height: 320px;
  overflow: hidden;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.group-detail-hero.has-group-cover {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.group-detail-hero .group-card-top {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 74px;
  padding-right: 175px;
}

.group-detail-hero img.group-custom-icon {
  display: block !important;
  position: relative;
  flex: 0 0 72px !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 18px;
  box-sizing: border-box;
  z-index: 2;
}

.group-detail-hero .group-symbol {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  box-sizing: border-box;
}

.group-detail-hero h1,
.group-detail-hero > p,
.group-detail-hero .group-meta,
.group-detail-hero .member-note,
.group-detail-hero > form {
  position: relative;
  z-index: 1;
  overflow-wrap: anywhere;
}

.group-detail-hero .group-status {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 5;
}

.group-detail-hero .group-cover-edit {
  position: absolute;
  top: 66px;
  right: 22px;
  z-index: 5;
  max-width: 150px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .group-detail-hero {
    min-height: 280px;
    padding: 20px;
  }
  .group-detail-hero .group-card-top {
    min-height: 68px;
    padding-right: 0;
    padding-top: 76px;
  }
  .group-detail-hero .group-status {
    top: 20px;
    right: 20px;
  }
  .group-detail-hero .group-cover-edit {
    top: 58px;
    right: 20px;
    padding: 8px 10px;
    font-size: 12px;
  }
  .group-detail-hero img.group-custom-icon,
  .group-detail-hero .group-symbol {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    flex-basis: 64px !important;
  }
}

/* OurMinds: enforce compact group icon and member avatars */
.group-detail-hero .group-card-top img.group-custom-icon {
  display: block !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  object-fit: cover !important;
  flex: 0 0 56px !important;
  border-radius: 16px !important;
  position: relative;
  z-index: 2;
}

.profile-member-list {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.profile-member-list .profile-member {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  min-width: 0;
  max-width: 100%;
}

.profile-member-list img.group-member-avatar,
.profile-member-list .group-member-avatar {
  display: inline-flex !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  flex: 0 0 40px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  overflow: hidden;
}

.group-detail-hero.has-group-cover {
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.group-detail-hero .group-meta img.group-member-avatar {
  display: inline-flex !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  vertical-align: middle;
}

@media (max-width: 640px) {
  .group-detail-hero .group-card-top img.group-custom-icon {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    flex-basis: 48px !important;
  }
}



/* OurMinds chat polish: compact images, circular avatars, top-right pin */
#om-chat .chat-message {
  position: relative;
  min-width: 0;
}

#om-chat .chat-message-head {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex-wrap: nowrap;
}

#om-chat .chat-author-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center;
  flex: 0 0 36px !important;
  overflow: hidden;
}

#om-chat .chat-author-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

#om-chat .chat-message-time {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
}

#om-chat .chat-message-head .chat-pin-button {
  margin-left: 4px;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 11px;
}

/* Keep chat photos compact; click to open the original attachment */
#om-chat .chat-image-link {
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 8px 0 !important;
  vertical-align: top;
}

#om-chat .chat-inline-image {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: min(100%, 260px) !important;
  max-height: 220px !important;
  object-fit: contain !important;
  border-radius: 10px;
}

/* Small screens: prevent the header from overflowing */
@media (max-width: 520px) {
  #om-chat .chat-message-head {
    gap: 6px;
  }

  #om-chat .chat-message-time {
    font-size: 10px;
  }

  #om-chat .chat-message-head .chat-pin-button {
    padding: 4px 6px;
    font-size: 10px;
  }

  #om-chat .chat-inline-image {
    max-width: min(100%, 220px) !important;
    max-height: 190px !important;
  }
}



/* Message layout matching the requested compact chat design */
#om-chat .chat-message {
  position: relative;
  min-width: 0;
}

#om-chat .chat-message-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

#om-chat .chat-message-head {
  display: block;
  margin: 0;
  min-width: 0;
}

#om-chat .chat-author-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  max-width: 100%;
}

#om-chat .chat-author-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center;
  flex: 0 0 36px !important;
  overflow: hidden;
}

#om-chat .chat-author-name {
  display: block;
  font-size: 11px;
  overflow-wrap: anywhere;
}

#om-chat .chat-message-top-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-shrink: 0;
}

#om-chat .chat-message-top-tools .chat-pin-button {
  order: 1;
  padding: 2px 4px;
  border:0;
  background:transparent;
  font-size: 15px;
  line-height: 1.2;
  min-width: 0;
}

#om-chat .chat-message-top-tools .chat-reply-icon {
  order: 2;
  padding: 0 2px;
  border:0;
  background:transparent;
  font-size: 17px;
  line-height: 1.2;
}

#om-chat .chat-message-content {
  position: absolute;
  top: 43px;
  left: 56px;
  right: 12px;
  min-width: 0;
}

#om-chat .chat-message-content .chat-message-body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

#om-chat .chat-message-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  color:var(--text-muted);
  font-size: 10px;
}

#om-chat .chat-message-footer .chat-message-time {
  font-size: 10px;
  white-space: normal;
  text-align: right;
}

#om-chat .chat-image-link {
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 8px 0 !important;
}

#om-chat .chat-inline-image {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: min(100%, 260px) !important;
  max-height: 220px !important;
  object-fit: contain !important;
  border-radius: 10px;
}

@media (max-width: 520px) {
  #om-chat .chat-message-content {
    left: 50px;
    right: 6px;
  }

  #om-chat .chat-author-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex-basis: 32px !important;
  }

  #om-chat .chat-inline-image {
    max-width: min(100%, 220px) !important;
    max-height: 190px !important;
  }
}


/* Fix: chat messages should use the available chat width */
#om-chat .chat-message {
  width: fit-content;
  max-width: 85%;
  min-width: min(320px, 100%);
  box-sizing: border-box;
}

#om-chat .chat-message-content {
  position: static !important;
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin: 8px 0 0 48px;
  overflow-wrap: anywhere;
}

#om-chat .chat-message-content .chat-message-body {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}

#om-chat .chat-message-top {
  width: 100%;
  min-width: 0;
}

#om-chat .chat-message-footer {
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
}

#om-chat .chat-image-link {
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
}

#om-chat .chat-inline-image {
  max-width: min(100%, 260px) !important;
  max-height: 220px !important;
}

/* Keep message cards responsive on smaller screens */
@media (max-width: 520px) {
  #om-chat .chat-message {
    max-width: 96%;
    min-width: 0;
  }

  #om-chat .chat-message-content {
    margin-left: 42px;
  }
}


/* Final chat layout: compact cards with natural widths */
#om-chat .chat-message {
  display: block;
  width: fit-content;
  max-width: 96%;
  min-width: 0;
  position: relative;
  box-sizing: border-box;
}

#om-chat .chat-message-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#om-chat .chat-message-head {
  flex: 0 0 auto;
  margin: 0;
}

#om-chat .chat-author-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

#om-chat .chat-author-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  border-radius: 50% !important;
  aspect-ratio: 1;
  object-fit: cover !important;
  flex: 0 0 36px !important;
}

#om-chat .chat-message-top-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

#om-chat .chat-message-top-tools .chat-pin-button {
  font-size: 15px;
  padding: 2px 4px;
  line-height: 1.2;
  border:0;
  background:transparent;
  min-width: 0;
}

#om-chat .chat-message-content {
  position: static !important;
  display: block;
  margin: -25px 0 0 46px !important;
  padding: 0;
  width: auto;
  min-width: 0;
  max-width: calc(100% - 46px);
  overflow-wrap: anywhere;
}

#om-chat .chat-message-content .chat-message-body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}

#om-chat .chat-message-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  width: 100%;
  font-size: 10px;
}

#om-chat .chat-image-link {
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
}

#om-chat .chat-inline-image {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: min(100%, 260px) !important;
  max-height: 220px !important;
  object-fit: contain !important;
}

@media (max-width: 520px) {
  #om-chat .chat-message {
    max-width: 100%;
  }

  #om-chat .chat-message-content {
    margin-left: 42px !important;
    max-width: calc(100% - 42px);
  }
}

/* Pin left of reply icon at the top-right of each message */
#om-chat .chat-message-top {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
}

#om-chat .chat-message-top-tools {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

#om-chat .chat-message-top-tools .chat-pin-button {
  order: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  border:0;
  background:transparent;
  font-size: 15px;
}

#om-chat .chat-message-top-tools .chat-reply-icon {
  order: 2;
  padding: 2px 4px;
  border:0;
  background:transparent;
  font-size: 17px;
}

/* Final pin and reply icon placement */
#om-chat .chat-message-top-tools {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-left: auto !important;
}

#om-chat .chat-message-top-tools .chat-pin-button {
  order: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border:none !important;
  border-radius: 0 !important;
  background:transparent !important;
  box-shadow: none !important;
  color:inherit !important;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer;
}

#om-chat .chat-message-top-tools .chat-reply-icon {
  order: 2 !important;
  padding: 0 !important;
  margin: 0 !important;
  border:none !important;
  background:transparent !important;
  box-shadow: none !important;
  font-size: 17px !important;
  line-height: 1 !important;
  cursor: pointer;
}

/* Final pin and reply icon placement */
#om-chat .chat-message-top-tools {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-left: auto !important;
}

#om-chat .chat-message-top-tools .chat-pin-button {
  order: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border:none !important;
  border-radius: 0 !important;
  background:transparent !important;
  box-shadow: none !important;
  color:inherit !important;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer;
}

#om-chat .chat-message-top-tools .chat-reply-icon {
  order: 2 !important;
  padding: 0 !important;
  margin: 0 !important;
  border:none !important;
  background:transparent !important;
  box-shadow: none !important;
  font-size: 17px !important;
  line-height: 1 !important;
  cursor: pointer;
}


/* Taller group chat panel with a fixed visible composer */
#om-chat {
  height: min(88vh, 1100px) !important;
  min-height: 760px !important;
  display: flex !important;
  flex-direction: column !important;
}

#om-chat .chat-feed {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}

/* Keep composer at the bottom of the taller panel */
#om-chat .chat-composer {
  flex: 0 0 auto !important;
}

/* Pin and reply icons share the top-right toolbar */
#om-chat .chat-message-top-tools {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  margin-left: auto !important;
}

#om-chat .chat-message-top-tools .chat-pin-button,
#om-chat .chat-message-top-tools .chat-reply-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow: none !important;
  line-height: 1.2 !important;
}

#om-chat .chat-message-top-tools .chat-pin-button {
  order: 1 !important;
  font-size: 15px !important;
}

#om-chat .chat-message-top-tools .chat-reply-icon {
  order: 2 !important;
  font-size: 17px !important;
}

@media (max-width: 780px) {
  #om-chat {
    height: 85vh !important;
    min-height: 600px !important;
  }
}

/* Clean final chat layout */
#om-chat {
  height: min(88vh, 1100px);
  min-height: 600px;
  display: flex;
  flex-direction: column;
}

#om-chat #chat-feed {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

#om-chat .chat-composer {
  flex: 0 0 auto;
}

#om-chat .chat-message {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  max-width: 96%;
}

#om-chat .chat-message-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 0;
}

#om-chat .chat-message-head {
  display: block;
  flex: 0 0 auto;
  margin: 0;
}

#om-chat .chat-author-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

#om-chat .chat-author-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 36px;
}

#om-chat .chat-message-top-tools {
  position: absolute;
  top: 8px;
  right: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  line-height: 1;
}

#om-chat .chat-message-top-tools > .chat-pin-button,
#om-chat .chat-message-top-tools > .chat-reply-icon {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border:0;
  background:transparent;
  box-shadow: none;
  line-height: 1;
}

#om-chat .chat-message-top-tools > .chat-pin-button {
  order: 1;
  font-size: 15px;
}

#om-chat .chat-message-top-tools > .chat-reply-icon {
  order: 2;
  font-size: 17px;
}

/* Message content flows naturally inside its card */
#om-chat .chat-message-content {
  position: static;
  display: block;
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin: 8px 0 0 46px;
  padding: 0;
  overflow-wrap: anywhere;
}

#om-chat .chat-message-content .chat-message-body {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}

#om-chat .chat-message-footer {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 8px;
  font-size: 10px;
}

#om-chat .chat-image-link {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
}

#om-chat .chat-inline-image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 260px);
  max-height: 220px;
  object-fit: contain;
}

@media (max-width: 780px) {
  #om-chat {
    height: 85vh;
    min-height: 600px;
  }

  #om-chat .chat-message {
    max-width: 100%;
  }

  #om-chat .chat-message-content {
    margin-left: 42px;
  }
}

/* Reduce excess gap between top icons and message content */
#om-chat .chat-message-top {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#om-chat .chat-message-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Keep content aligned beside the circular avatar */
#om-chat .chat-message-content {
  margin-left: 46px !important;
}

/* Remove extra top margin from text and reply preview */
#om-chat .chat-message-content .chat-message-body,
#om-chat .chat-message-content .chat-reply-preview {
  margin-top: 0 !important;
}

/* Keep pin/reply controls at the top-right */
#om-chat .chat-message-top-tools {
  top: 8px !important;
  right: 10px !important;
}

/* Final alignment: message text starts beside avatar, near the top */
#om-chat .chat-message-content {
  margin-top: -28px !important;
  margin-left: 46px !important;
  padding-top: 0 !important;
  position: relative !important;
  top: 0 !important;
  transform: none !important;
}

/* Keep reply preview aligned with the message text */
#om-chat .chat-message-content .chat-reply-preview {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* Keep the toolbar close to the top edge */
#om-chat .chat-message-top-tools {
  top: 6px !important;
  right: 10px !important;
}

/* Preserve circular avatars */
#om-chat .chat-author-avatar {
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Correct message content position and stop horizontal overflow */
#om-chat #chat-feed {
  overflow-x: hidden !important;
}

#om-chat .chat-message {
  min-width: 0 !important;
  max-width: 96% !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
}

#om-chat .chat-message-content {
  position: static !important;
  top: auto !important;
  transform: none !important;
  margin-top: 4px !important;
  margin-left: 46px !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 46px) !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
}

#om-chat .chat-message-content .chat-message-body {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

#om-chat .chat-message-content .chat-reply-preview {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
  white-space: pre-wrap !important;
}

#om-chat .chat-message-top-tools {
  top: 6px !important;
  right: 10px !important;
}

#om-chat .chat-message-footer {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Final alignment: message content closer to avatar */
#om-chat .chat-message-content {
  margin-top: 4px !important;
  margin-left: 46px !important;
  width: calc(100% - 46px) !important;
  max-width: calc(100% - 46px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  position: static !important;
  transform: none !important;
  overflow-wrap: anywhere !important;
}

/* Keep message and reply preview within the message card */
#om-chat .chat-message-content .chat-message-body,
#om-chat .chat-message-content .chat-reply-preview {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

#om-chat .chat-message-content .chat-reply-preview {
  margin: 0 0 8px !important;
}

/* Keep the pin and reply icons together at top-right */
#om-chat .chat-message-top-tools {
  position: absolute !important;
  top: 6px !important;
  right: 10px !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Prevent content from creating horizontal overflow */
#om-chat .chat-message {
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
}

#om-chat #chat-feed {
  overflow-x: hidden !important;
}

/* Final correction: reduce horizontal gap after the avatar */
#om-chat .chat-message-content {
  margin-left: 42px !important;
  width: calc(100% - 42px) !important;
  max-width: calc(100% - 42px) !important;
  box-sizing: border-box !important;
}

#om-chat .chat-message-content .chat-message-body,
#om-chat .chat-message-content .chat-reply-preview {
  margin-left: 0 !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

#om-chat .chat-message-content .chat-reply-preview {
  width: 100% !important;
  white-space: pre-wrap !important;
}

#om-chat .chat-message-top-tools {
  top: 6px !important;
  right: 10px !important;
}

/* Move message text up while keeping it to the right of the avatar */
#om-chat .chat-message-content {
  margin-top: -18px !important;
  margin-left: 42px !important;
  padding-top: 0 !important;
  position: relative !important;
  top: 0 !important;
  transform: none !important;
}

/* Keep reply preview aligned with the message text */
#om-chat .chat-message-content .chat-reply-preview {
  margin-top: 0 !important;
}

/* Keep pin and reply icons unchanged */
#om-chat .chat-message-top-tools {
  top: 6px !important;
  right: 10px !important;
}

/* Final fix: move content up without overflowing the message card */
#om-chat .chat-message-content {
  margin-top: 0 !important;
  margin-left: 42px !important;
  width: calc(100% - 42px) !important;
  max-width: calc(100% - 42px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  top: -10px !important;
  transform: none !important;
  overflow-wrap: anywhere !important;
}

#om-chat .chat-message-content .chat-message-body,
#om-chat .chat-message-content .chat-reply-preview {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
}

#om-chat .chat-message-content .chat-reply-preview {
  margin-top: 0 !important;
  white-space: pre-wrap !important;
}

/* OurMinds chat: final message alignment and spacing correction */
#om-chat .chat-message {
  position: relative !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
}

#om-chat .chat-message-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

#om-chat .chat-message-head {
  flex: 0 0 42px !important;
  width: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#om-chat .chat-author-block {
  margin: 0 !important;
  padding: 0 !important;
}

#om-chat .chat-message-top-tools {
  position: absolute !important;
  top: 6px !important;
  right: 10px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#om-chat .chat-message-content {
  position: static !important;
  top: auto !important;
  margin: 0 0 0 42px !important;
  padding: 0 28px 0 0 !important;
  width: calc(100% - 70px) !important;
  max-width: calc(100% - 70px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
}

#om-chat .chat-message-content .chat-message-body {
  margin: 0 0 6px !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
  white-space: pre-wrap !important;
}

#om-chat .chat-message-content .chat-reply-preview {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 0 6px !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}

#om-chat .chat-message-footer {
  margin-top: 0 !important;
}

#om-chat #chat-feed {
  overflow-x: hidden !important;
}

/* Targeted fix: left-align message text and contain reply previews */
#om-chat .chat-message-content,
#om-chat .chat-message-content .chat-message-body,
#om-chat .chat-message-content .chat-reply-preview {
  text-align: left !important;
  direction: ltr !important;
  float: none !important;
}

#om-chat .chat-message-content .chat-message-body {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

#om-chat .chat-message-content .chat-reply-preview {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  overflow: hidden !important;
}

/* Final fix: keep short chat messages on one line */
#om-chat .chat-message-content {
  width: auto !important;
  max-width: calc(100% - 42px) !important;
  min-width: 0 !important;
  margin-left: 42px !important;
  margin-right: 0 !important;
  padding-right: 28px !important;
  box-sizing: border-box !important;
}

#om-chat .chat-message-content .chat-message-body {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: pre-wrap !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

#om-chat .chat-message-content .chat-reply-preview {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Fix vertical gap between profile/header and message text */
#om-chat .chat-message-top {
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#om-chat .chat-message-content {
  top: -42px !important;
  margin-top: 0 !important;
  margin-bottom: -42px !important;
  padding-top: 0 !important;
}

#om-chat .chat-message-content .chat-message-body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#om-chat .chat-message-footer {
  margin-top: 0 !important;
}

/* Fix vertical gap between profile/header and message text */
#om-chat .chat-message-top {
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#om-chat .chat-message-content {
  top: -42px !important;
  margin-top: 0 !important;
  margin-bottom: -42px !important;
  padding-top: 0 !important;
}

#om-chat .chat-message-content .chat-message-body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#om-chat .chat-message-footer {
  margin-top: 0 !important;
}

/* FINAL CHAT LAYOUT REPAIR - 20 OCT 2026 */
#om-chat .chat-message {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  box-sizing: border-box !important;
  padding: 12px !important;
}

/* Profile remains on the left; icons remain on the top-right */
#om-chat .chat-message-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#om-chat .chat-message-head {
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#om-chat .chat-author-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#om-chat .chat-message-top-tools {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Message starts beside the profile, without negative offsets */
#om-chat .chat-message-content {
  position: static !important;
  top: auto !important;
  transform: none !important;
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: -42px 24px 0 42px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  text-align: left !important;
  direction: ltr !important;
}

#om-chat .chat-message-content .chat-message-body {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  box-sizing: border-box !important;
}

#om-chat .chat-message-content .chat-reply-preview {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 6px !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

#om-chat .chat-message-footer {
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
}

#om-chat .chat-image-link,
#om-chat .chat-attachment,
#om-chat .chat-interactive {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#om-chat #chat-feed {
  overflow-x: hidden !important;
}