/* Action Apps Community v73
   Unified public/community action controls.
   Scoped intentionally so global forms/auth/admin buttons are not changed.
*/

:root{
  --community-action-height:38px;
  --community-action-radius:10px;
  --community-action-pad:0 13px;
  --community-action-font:12px;
  --community-action-border:#d0d5dd;
  --community-action-bg:#fff;
  --community-action-text:#475467;
  --community-action-hover:#f2f4f7;
  --community-action-active-bg:#eef2ff;
  --community-action-active-border:#818cf8;
  --community-action-active-text:#3730a3;
  --community-action-danger-bg:#fff;
  --community-action-danger-border:#fda29b;
  --community-action-danger-text:#b42318;
  --community-action-danger-hover:#fff1f3;
}

.community-public-actions,
.thread-card-actions,
.post-actions,
.reply-card footer,
.community-management-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.community-public-actions{
  margin-top:14px;
}

.community-management-actions{
  justify-content:flex-end;
}

/* One neutral action-button system */
.community-public-actions button,
.community-public-actions .secondary-btn,
.thread-card-actions button,
.post-actions button,
.reply-card footer button,
.community-management-actions .secondary-btn,
.community-context-search .context-search-toggle,
.community-context-search .context-search-clear{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--community-action-height);
  height:var(--community-action-height);
  padding:var(--community-action-pad);
  margin:0;
  border:1px solid var(--community-action-border) !important;
  border-radius:var(--community-action-radius) !important;
  background:var(--community-action-bg) !important;
  color:var(--community-action-text) !important;
  font:inherit;
  font-size:var(--community-action-font) !important;
  line-height:1;
  font-weight:800 !important;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:none !important;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}

.community-public-actions button:hover,
.community-public-actions .secondary-btn:hover,
.thread-card-actions button:hover,
.post-actions button:hover,
.reply-card footer button:hover,
.community-management-actions .secondary-btn:hover,
.community-context-search .context-search-toggle:hover,
.community-context-search .context-search-clear:hover{
  background:var(--community-action-hover) !important;
  border-color:#98a2b3 !important;
  color:#344054 !important;
  transform:translateY(-1px);
}

/* Followed / liked state */
.community-follow-btn.following,
.follow-btn.following,
.community-like-btn.liked,
.thread-like-btn.liked,
.like-btn.liked{
  background:var(--community-action-active-bg) !important;
  border-color:var(--community-action-active-border) !important;
  color:var(--community-action-active-text) !important;
}

/* Follow buttons should not look like pills anymore */
.follow-btn,
.community-follow-btn{
  border-radius:var(--community-action-radius) !important;
}

/* Flag remains secondary/destructive, but same dimensions */
.flag-btn{
  margin-left:0 !important;
  background:#fff !important;
  border-color:#fecdd3 !important;
  color:#b42342 !important;
}
.flag-btn:hover{
  background:#fff1f3 !important;
  border-color:#fda4af !important;
  color:#9f1239 !important;
}

/* Delete uses the same geometry, clearly destructive */
.delete-btn,
.post-actions .danger-btn,
.reply-card footer .danger-btn{
  background:var(--community-action-danger-bg) !important;
  border-color:var(--community-action-danger-border) !important;
  color:var(--community-action-danger-text) !important;
}
.delete-btn:hover,
.post-actions .danger-btn:hover,
.reply-card footer .danger-btn:hover{
  background:var(--community-action-danger-hover) !important;
  border-color:#f04438 !important;
  color:#912018 !important;
}

/* Search input aligns with the button row */
.community-context-search{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0;
}
.community-context-search .context-search-panel{
  min-height:var(--community-action-height);
}
.community-context-search input[type="search"]{
  height:var(--community-action-height);
  min-height:var(--community-action-height);
  border-radius:var(--community-action-radius);
}

/* Thread cards */
.thread-card-actions{
  padding-top:10px;
}

/* Disabled */
.community-public-actions button:disabled,
.thread-card-actions button:disabled,
.post-actions button:disabled,
.reply-card footer button:disabled{
  opacity:.52;
  cursor:not-allowed;
  transform:none;
}

/* Mobile: wrap cleanly instead of producing odd-sized controls */
@media(max-width:640px){
  .community-public-actions,
  .thread-card-actions,
  .post-actions,
  .reply-card footer{
    gap:7px;
  }

  .community-public-actions button,
  .thread-card-actions button,
  .post-actions button,
  .reply-card footer button,
  .community-context-search .context-search-toggle,
  .community-context-search .context-search-clear{
    min-height:40px;
    height:40px;
    padding:0 12px;
  }

  .community-context-search{
    width:auto;
  }

  .community-context-search .context-search-panel{
    flex:1 1 100%;
    width:100%;
  }
}

/* v74: thread/reply mobile layout fix
   Keep response text full-width and move action controls below it. */
@media(max-width:640px){
  .reply-card{
    display:block !important;
    width:100%;
    min-width:0;
  }

  .reply-card > header,
  .reply-card .replying-to,
  .reply-card .reply-body,
  .reply-card .content-image,
  .reply-card .link-preview,
  .reply-card footer{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .reply-card .reply-body{
    display:block;
    clear:both;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  .reply-card footer{
    display:flex !important;
    position:static !important;
    float:none !important;
    clear:both;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    margin-top:12px;
    padding-top:10px;
  }

  .reply-card footer button{
    flex:0 0 auto;
  }

  .original-post .post-actions{
    display:flex !important;
    position:static !important;
    float:none !important;
    clear:both;
    width:100%;
    margin-top:14px;
    flex-wrap:wrap;
    justify-content:flex-start;
  }

  .thread-original-body{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-wrap:anywhere;
  }

  .thread-node,
  .thread-children,
  .threaded-posts{
    min-width:0;
    max-width:100%;
  }

  .thread-node{
    overflow:visible;
  }
}

